Question

我对HTML和CSS相当陌生，正在研究我的网页设计课程，并且遇到了我的一个页面，不允许我按照我想要的方式浮动div。我的目标是让一个div浮动，另一个fl就在彼此旁边。我不能让第一个div向左浮动，但我可以让第二个div向右浮动但它仍然在第一个div下面。我觉得我错过了一些简单的东西，但我无法弄明白。

#services {
  float: left;
}
#contact {
  float: right;
  font-weight: bold;
  font-style: italic;
}

<main>
  <div id="services">
    <h2>Services</h2>

    <p>Lorem ipsum dolor sit amet, natoque pharetra. Neque vulputate wisi in. Per blandit viverra parturient vitae, maecenas orci turpis scelerisque odio, viverra enim. Condimentum id neque lobortis donec mauris, ridiculus nonummy vel massa vestibulum est.
      Blandit non convallis primis conubia est varius, velit a parturient, dapibus dictumst eu aptent maecenas elit sodales, vel imperdiet enim vulputate lorem. Vel dictumst, lacus vel cum tempor suspendisse tellus, consectetuer vel orci, metus pellentesque,
      nulla hac convallis nonummy tempus. Sollicitudin pulvinar eget scelerisque libero, nullam dis. Ipsum sit malesuada odio nisl. Amet donec, cursus vulputate eget mattis. Praesent velit dui ligula malesuada parturient tincidunt. Nisl ligula condimentum
      id. Consectetuer arcu, elit massa nostra diam ut augue, vel dolor sollicitudin molestie.</p>

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>


  <div id="contact">

    <h2>Contact Us</h2>

    <p>Contact Name
      <br>Line 1
      <br>Line 2
      <br>Post Code
      <br>
      <a id="mobile" href="tel:111-123-4567">(111) 123-4567</a>
      <span id="desktop">(111) 123-4567</span>
      <br>
      <a href="mailto:info@info.com">info@info.com</a>
    </p>
    <br>
  </div>
</main>

提前感谢您的帮助！

Answer 1

您必须为它们定义宽度。这样它们的宽度总和是100％。如果您不希望它们延伸到很多，那么您可以使用max-width属性。

这些浮动的div不应该有任何边距，但你可以给它们填充。此外，如果您对其中任何一个使用border属性，请不要忘记使用box-sizing:border-box;，否则左侧将向下推右侧。我在这个例子中使用了边框来表示这一点。

以下是示例：

#services{
  float:left;
  width:70%;
  margin:0;
  padding:10px;
  border:1px solid red;
  box-sizing:border-box;
}
#contact{
  float: right;
  font-weight: bold;
  font-style: italic;
  width:30%;
  margin:0;
  padding:10px;
  border:1px solid green;
  box-sizing:border-box;
}

<main>
           <div id="services">
                <h2>Services</h2>

                <p>Lorem ipsum dolor sit amet, natoque pharetra. Neque vulputate wisi in. Per blandit viverra parturient vitae, maecenas orci turpis scelerisque odio, viverra enim. Condimentum id neque lobortis donec mauris, ridiculus nonummy vel massa vestibulum est. Blandit non convallis primis conubia est varius, velit a parturient, dapibus dictumst eu aptent maecenas elit sodales, vel imperdiet enim vulputate lorem. Vel dictumst, lacus vel cum tempor suspendisse tellus, consectetuer vel orci, metus pellentesque, nulla hac convallis nonummy tempus. Sollicitudin pulvinar eget scelerisque libero, nullam dis. Ipsum sit malesuada odio nisl. Amet donec, cursus vulputate eget mattis. Praesent velit dui ligula malesuada parturient tincidunt. Nisl ligula condimentum id. Consectetuer arcu, elit massa nostra diam ut augue, vel dolor sollicitudin molestie.</p>

                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>


            <div id="contact">

                <h2>Contact Us</h2>

                <p>Contact Name<br>
                Line 1<br>
                Line 2<br>
                Post Code<br>
                <a id="mobile" href="tel:111-123-4567">(111) 123-4567</a>
                <span id="desktop">(111) 123-4567</span><br>
                <a href="mailto:info@info.com">info@info.com</a>
                </p><br>
            </div>
        </main>

Answer 2

您没有提供服务，并且在主要区域下方联系div。你必须首先给出，最后工作浮动左或右属性。

Answer 3

为了使两个div彼此相对，你需要设置第一个div（#services）宽度小于100％，以便另一个div可以放在同一行，否则整行被占用通过那个div本身。仅对CSS进行修改。
修改后的代码在这里：https://jsfiddle.net/admL7ss3/

#services {
  float: left;
  width:50%;
  valign:top;
}
#contact {
  font-weight: bold;
  font-style: italic;
}
h2{
  margin-top:0px;  
}

我不能让我的一个div向左浮动而另一个向左浮动

3 个答案: