Question

我的div结构遇到了一些问题。

我有＆＃34;行＆＃34;，几乎像一张桌子，但用div制作。每个div行有2个div，基本上就像2个div列。每列只有一些填充文本。问题是第二行div实际上位于第一行div的顶部。它令人困惑，因为第二行中的内容恰好位于第二行的位置，如果第二行位于实际应该位于的位置...但是使用内联样式我发现行没有正确定位并且他们只是实际堆叠。

HTML：

<div class="container">
  <div class="row" style="green">
    <div class="title">div1</div>
        <div class="wrapper">
          div2
  </div>
  <div class="row" style="background:red">
    <div class="title">div3</div>
    <div class="wrapper">
      div4
    </div>
  </div>
</div>

CSS：

.container{
  width:100%;
  background:rgb(133, 133, 133);
  height:100px;
}

.row{
  width:100%;
  height:50px;
}

.title{
  width:20%;
  height:50px;
  float:left;
}

.wrapper{
  float:left;
  width:80%;
  height:50px;
}

指向图片的链接有助于解释我想要的内容...... https://i.imgur.com/GawSC4y.png

Answer 1

这是你想要的吗？

浮动元素父母需要明确。

使用

.row {
  width: 100%;
  height: 50px;
  clear:both;/*Add this*/
}

.container {
  width: 100%;
  background: rgb(133, 133, 133);
  height: 100px;
}

.row {
  width: 100%;
  height: 50px;
  clear:both;
}

.title {
  width: 20%;
  height: 50px;
  float: left;
}

.wrapper {
  float: left;
  width: 80%;
  height: 50px;
}

<div class="container">
  <div class="row" style="background:green">
    <div class="title">div1</div>
    <div class="wrapper">
      div2
    </div>
    <div class="row" style="background:red">
      <div class="title">div3</div>
      <div class="wrapper">
        div4
      </div>
    </div>
  </div>
</div>

Answer 2

您错过了第一行的结束div标记。

<div class="container">
  <div class="row" style="background:green">
    <div class="title">div1</div>
    <div class="wrapper">
      div2
    </div>
  </div>
  <div class="row" style="background:red">
    <div class="title">div3</div>
    <div class="wrapper">
      div4
    </div>
  </div>
</div>

如何在另一个浮动的div内获得两个不同宽度的div

2 个答案: