Question

这是html编码：

<div>        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</div>

我希望并排显示html部分。当我这样做时，它有效：

div {float: left;}
div section {width: 50%; float: left;}

但是当我尝试将每个指定为一个单独的大小时，它不会：

div {
    float: left;
}
section .aboutus{
    float: left;
    width: 80%;
}
section .tripinfo{
    float: left;
    width: 20%
}

如你所见。在第一个例子中，我在同一个代码块中将这两个部分都设为50％。但是，只要我在不同的类中指定每个on的大小，它就会搞砸了。所以，如果你们中的任何人能够帮助我，那就太棒了。

Answer 1

尝试使用Flexbox而不是浮动。

＆＃13;

#container{
  display: flex;
  border: 1px solid #333;
}

#container section {
  padding: 10px;
}

.aboutus{
  background: #CCC;
  width: 80%;
}

.tripinfo {
  background: #DDD;
  width: 20%;
}

＆＃13;

<div id="container">        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
    </section>
</div>

＆＃13;

Answer 2

使用display: flex而不是float，这将更容易，代码更少。

你的HTML和CSS应该是：

＆＃13;

.flex {
  display: flex;
}

.aboutus {
  width: 80%;
  background: grey;
}

tripinfo {
  width: 20%;
}

＆＃13;

<div class="flex">        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</div>

＆＃13;

Answer 3

将此属性添加到div元素

display:inline;

如果它不起作用，则从div中删除float：left并将float：left添加到第一部分并显示：内联到两个部分

Answer 4

通过好的建议看到一些答案，但没有人真正指出你的例子究竟出了什么问题。

您不需要div {float: left;}。它适用于页面上的每个div并导致一些时髦的行为。
CSS选择器中的空格表示后代，因此选择器section .class正在应用于后代的任何.class 一个section。如果您希望它应用于section 和 .class的元素，请删除空格，如下所示：section.class
浮动需要clear秒。在每个浮动元素级别之后，您需要包含clear: both;以确保之后的元素仍然可以正确显示。通过执行::after伪元素可以更轻松地实现这一点，因此您不必在页面上实际放置另一个元素以进行清除。

更新的例子：

＆＃13;

div.float-container::after {
    clear: both;
}

section.aboutus{
    float: left;
    width: 80%;
}
section.tripinfo{
    float: left;
    width: 20%
}

＆＃13;

<div class="float-container">        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</div>

＆＃13;

display: flex几乎在所有情况下都会让事情变得更轻松，但它并不总是答案。我真的觉得有时float只是一种更简洁，更简洁的方法来实现简单的结果。

并排显示两个不同大小的部分html

4 个答案: