选项1

Question

我制作了一个简单版本的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如您所见，第二组divs包含大量文字。

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

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

Answer 1

您需要为两个div设置宽度才能实现..

enter code here

FIDDLE

Answer 2

设置.first和.second

的宽度

<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>
<style>
.box {
    border: 1px solid black;
}
.first {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
    width:20%;
}
.second {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
    width:60%;
}
.clear{
    clear: both;
}
</style>

here is fiddle

Answer 3

div上需要的宽度，或者占用可用区域的100%！

<html>
<body>
<style>
.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;
  
  /* ADD A WIDTH */
    width: 250px;
}
.clear{
    clear: both;
}
</style>

<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>

Answer 4

我刚刚更新了css课程，你能试试这个吗？

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

Answer 5

选项1

如果不设置宽度，则无法在当前结构中完成此操作。但是，您可以通过设置1个宽度来实现此目的。

如果你给.first一个设定的宽度，绝对位置，并设置.second一个填充以适合.first - div，你可以解决这个问题，同时保持{{1}流体。

.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在旧浏览器中不受支持。

选项2

另一种方法是使用表而不是div。这会给你以下代码：

box-sizing

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

这种方法的优点是：它受到广泛支持。下行：这是一张桌子。。

当div停留在同一个地方时，如何在div中包装文本？

5 个答案:

选项1

选项2