html - 我如何将div float 到下一个

Question

我正在尝试将一个 div 并排放置。我尝试使用 float: left 等，我也在使用 Bootstrap ，但是我尝试了列设置，但它不起作用，

HTML:

<div class="container">
    <div class="Mainbody2">
        <div class="ref1">
            <h2>About</h2>
            <p>Text GOES HERE</p>
            <h2>Statement!</h2>
            <p>STATMENT GOES HERE</p><br />
            <br />
            <br />
            <h2>Number1</h2>
            <ul>
                <li>link1</li>
                <li>link1</li>
                <li>link1</li>
                <li style="list-style: none"><br /></li>
                <li>link1</li>
                <li>link1</li>
                <li>link1</li>
                <li style="list-style: none"><br /></li>
            </ul>
        </div>

        <div class="ref2">
            <h2>Description</h2>
            <ul>
                <li>link2</li>
                <li>link2</li>
                <li>link2</li>
                <li style="list-style: none">
                    <br />
                    <h2>Libraries</h2>
                </li>
                <li>link2</li>
                <li>link2</li>
                <li>link2</li>
            </ul>
        </div>
    </div>
</div>

链接到 Fiddle

为了清楚起见，我正在尝试获取编号 1 旁边的描述，然后是描述旁边的库

再次感谢您的帮助

Answer 1

看这个fiddle

我已经对您的 HTML 进行了一些更改，如下所示

<div class="container">
  <div class="Mainbody2">
    <div class="ref1">
      <div class="left">
        <h2>About</h2>
        <p>Text GOES HERE </p>
        <h2>Statement!</h2>
        <p>
          STATMENT GOES HERE
        </p>
      </div>
      <div class="right">
        <h2>Description</h2>
        <li> link2</li>
        <li> link2</li>
        <li> link2</li>
      </div>
    </div>
    <div class="ref2">
      <div class="left">
        <h2>Number1</h2>
        <li> link1</li>
        <li> link1</li>
        <li> link1</li>
        <br>
        <li> link1</li>
        <li> link1</li>
        <li> link1</li>
      </div>
      <div class="right">
        <h2>Libraries</h2>
        <li> link2</li>
        <li> link2</li>
        <li> link2</li>
      </div>
    </div>
  </div>
</div>

另外，添加了下面的 CSS

.left,
.right,.ref1,.ref2 {
  float: left;
}
.ref1,.ref2{

  padding:10px;
  width:100%;
}
.left,.right{
  width:50%;
}