需要帮助使用 CSS 浮动元素

问题描述 投票：0回答：1

我正在尝试为我正在上的这门课设计这个网页，但遇到了一些麻烦。我只在这个网站上发布过代码，但这次我将尝试包含屏幕截图，所以如果它没有发布图片，我很抱歉，这是我第一次。

所以，基本上我要做的就是制作一个线框，然后对其进行编码。我试图将一个旁侧元素浮动到另一个元素旁边。我对 HTML 还很陌生，所以我尝试做的是将旁边元素包装在一个部分元素中，然后浮动旁边元素，以便它们位于同一个父容器中，但即使我这样做，它也会浮动在一边下面是我想要的地方。

是否有办法让 side 元素像 [1] 中那样浮动？ 不是我在[2]中的说法。

这是我到目前为止所拥有的：

<!Doctype html>
<html>
    <header>
        <title>Homepage</title>
        <h1>Pennsylvania</h1>
        <style>
* {box-sizing: border-box}
body {font-family: sans-serif}
.mySlides {display: none}
img {vertical-align: middle;}

h1 {
    text-align: center;
    font-weight: bold;
    font-size: 100px;
    text-decoration: dashed;
    text-shadow: white;
    background-color: black;
    color: #ffffff;
    padding: 0px;
}

.links {
    text-align: center;
    border: -50px;
}

nav a{
    padding: 20px;
    width: 100%;
    justify-content: space-between;
}

.background_info {
    width: 60%;
    border: solid 5px black
    margin: 10px;
    padding: 50px;
    text-align: left;
}

.background_info h2 {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}

section .background_info{
  width: 60%;
  background-color: green;
}

.quick_facts {
    width: 40%;
    float: right;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  padding: 30px 0px 0px 0px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  background-color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 20%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
    </header>
    <body>
        <nav class="links">
            <a href="./harrisburg.html">Harrisburg</a>
            <a href="./pittsburgh.html">Pittsburgh</a>
            <a href="./philadelphia.html">Philadelphia</a>
        </nav>
      <section>
            <div class="slideshow-container">

                <!-- Full-width images with number and caption text -->
                <div class="mySlides fade">
                  <img src="https://travel2next.com/wp-content/uploads/pennsylvania-map.jpg" alt="Map image of Pennsylvania" name="Pennsylvania_image" style="width:100%">
                </div>
              
                <div class="mySlides fade">
                  <img src="https://www.redfin.com/blog/wp-content/uploads/2023/12/GettyImages-172989468.webp" alt="Pennsylvania landscape" name="Pennsylvania_landscape" style="width:100%">
                </div>
              
                <div class="mySlides fade">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Pennsylvania.svg" alt="Pennsylvania flag" name="Pennsylvania_flag" style="width:100%">
                </div>
              
                <!-- Next and previous buttons -->
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>
              </div>
              
              <!-- The dots/circles -->
              <div style="text-align:center">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
              </div>
            <div class="background_info">
                <h2>About</h2>
                <p>Pennsylvania was one of the United State's original 13 colonies, founded in 1681.
                The state was named after William Penn, an influential quaker at the time of their settlement in America.
                The capitol of pennsylvania is Harrisburg. With an area of just over 46,000 square miles,
                Pennsylvania boasts a great multitude of animals, foliage, and waterways. The state animal of Pennsylvania
                is a white tail deer, the state tree is an eastern hemlock, and the state flower is a mountain laurel. Pennsylvania
                is home to a number of nationally recognized schools such as Penn State University and the University of Pennsylvania.</p>
            </div>
        </section>
            <aside>
                <div class="quick_facts">
                    <h3>Did you know?</h3>
                    <p>Pennsylvania's nickname as "The keystone state" is because it connects the Northeastern and 
                    Southern United States, and the Atlantic seaboard and Midwest</p>
                </div>
            </aside>

    <script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
    </body>
</html>



  [1]: https://i.sstatic.net/md7ePRYD.png
  [2]: https://i.sstatic.net/AJwIXpx8.png
html css
1个回答
0
投票

看来你正在追求这样的东西：

<html>
    <style>
        .background_info {
            width: 100%;
            background-color: green;
            padding: 50px;  /* padding inside the green box */
            box-sizing: border-box;
        }

        .quick_facts {
            width: 40%;  /* relative width of the white box */
            background-color: white;
            padding: 10px;
            float: right;  /* floats to the right, allowing text to wrap */
            margin: 0 0 20px 20px;  /* margin between text and the white box */
        }
    </style>
    <body>
        <section>
            <div class="background_info">
                <div class="quick_facts">
                    <h3>Did you know?</h3>
                    <p>Pennsylvania's nickname as "The keystone state" is because it connects the Northeastern and 
                        Southern United States, and the Atlantic seaboard and Midwest.</p>
                </div>
                <h2>About</h2>
                <p>Pennsylvania was one of the United State's original 13 colonies, founded in 1681.
                The state was named after William Penn, an influential quaker at the time of their settlement in America.
                The capitol of pennsylvania is Harrisburg. With an area of just over 46,000 square miles,
                Pennsylvania boasts a great multitude of animals, foliage, and waterways. The state animal of Pennsylvania
                is a white tail deer, the state tree is an eastern hemlock, and the state flower is a mountain laurel. Pennsylvania
                is home to a number of nationally recognized schools such as Penn State University and the University of Pennsylvania.</p>
                <p>Another interesting fact is that Pennsylvania is one of the most historically significant states in the U.S.,
                home to the Liberty Bell and Independence Hall.</p>
            </div>
        </section>
    </body>
</html>

看起来像这样（取决于浏览器宽度）： enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.