当div停留在同一位置时，如何在div中换行？

Kevin Rovers 发表于 Dev

凯文·罗维尔

我已经编写了一个简单的代码版本：

.box {
  border: 1px solid black;
}

.first {
  float: left;
  color: #0000FF;
  font-weight: bold;
  padding: 0 20px;
}

.second {
  float: left;
  color: #0000FF;
  font-weight: bold;
  padding: 0 20px;
}

.clear {
  clear: both;
}

<html>

<body>

  <div class="box first">Username</div>
  <div class="box second">This is a short message</div>
  <div class="clear"></div>

  <div class="box first">Username</div>
  <div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div class="clear"></div>

  <div class="box first">Username</div>
  <div class="box second">Message</div>
  <div class="clear"></div>

</body>

</html>

如您所见，第二组divs包含很多文本。

我希望第二个div保持固定在第一个div旁边，第二个内部的文本div应换行。（就像已经一样）

我使用引导程序，所以我不想使用固定宽度。是否只能增加宽度？

桑德·科多（Sander Koedood）

选项1

如果不设置宽度，则无法在当前结构中完成此操作。但是，您可以通过仅设置1个宽度来做到这一点。

如果给定.first了一定的宽度，绝对位置并设置.second了适合.first-div的填充，则可以在保持.second流畅的同时解决此问题。

    .box {
    	border: 1px solid black;
    }
    .row {
        position: relative;
    }
    .first {
    	position: absolute;
        left: 0;
        top: 0;
    	color: #0000FF;
    	font-weight: bold;
    	padding: 0 20px;
        width: 80px;
    }
    .second {
    	box-sizing: border-box;
        width: 100%;
    	color: #0000FF;
    	font-weight: bold;
    	padding: 0 20px 0 140px;
    }
    .clear{
    	clear: both;
    }

    <html>
    <body>

    <div class="row">
    <div class="box first">Username</div>
    <div class="box second">This is a short message</div>
    <div class="clear"></div>
    </div>
    
    <div class="row">
    <div class="box first">Username</div>
    <div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
    <div class="clear"></div>
    </div>
    
    <div class="row">
    <div class="box first">Username</div>
    <div class="box second">Message</div>
    <div class="clear"></div>
    </div>
    
    </body>
    </html>

这种方法的缺点.first是宽度仍然很宽，这在较旧的浏览器中box-sizing不起作用，因为在较旧的浏览器中没有得到支持。

选项2

一种替代方法是使用表而不是div。这将为您提供以下代码：

    .box {
    	border: 1px solid black;
    }
    .first {
    	color: #0000FF;
    	font-weight: bold;
    	padding: 0 20px;
    }
    .second {
    	color: #0000FF;
    	font-weight: bold;
    	padding: 0 20px;
    }

    <html>
    <body>
    
    <table>
    <tr>
    <td class="box first">Username</td>
    <td class="box second">This is a short message</td>
    </tr>
    <tr>
    <td class="box first">Username</td>
    <td class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</td>
    </tr>
    <tr>
    <td class="box first">Username</td>
    <td class="box second">Message</td>
    </tr>
    </table>
    
    </body>
    </html>