我有一个用户输入文本的div。但是我想根据它的文字增加它的宽度,直到最多50%的屏幕。我的CSS代码:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
结果:
“555”消息后面有很多空格,只有当用户输入一些文字时我才想要这个尺寸:
那么,如何根据文本大小增加div的宽度?
答案 0 :(得分:7)
有很多方法可以达到这个目的,但恕我直言最清洁的是以下几点。 你的问题是盒子是“贪婪的”,并试图扩展到可用的宽度。
为防止这种情况,您可以:
CSS成为:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
我在Liveweave上提供了完整的代码和其他解释(鼠标悬停):http://liveweave.com/DFCZFj
答案 1 :(得分:2)
尝试将div的display
类型更改为table
。
<强> Example Here 强>
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
答案 2 :(得分:2)
只需添加display:inline;
即可。你也可以删除min width属性,否则如果文本较小,你仍然会有这个差距。
答案 3 :(得分:1)
块元素(div
的默认显示类型)将尝试占用容器的最大水平空间。想象一下,只要你看到它们就会隐含width:100%
。 inline-block
将创建块级元素,其中下一个元素将尝试水平相邻呈现(假设有足够的空间)。这就是你想要使用的东西(display: table
也可以在这个解决方案中使用,但它有自己的特性。我避免使用它们。
所以你的解决方案需要三个部分:
首先,您需要指定行不大于可用区域的50%。您将使用外框执行此操作:
.frame {
max-width:50%;
}
接下来,消息本身应该每次都为整行提供空间。因此,我们会在每条消息周围使用未修饰的div
标记。
最后,您将display: inline-block
用于最里面的messages
元素。由于他们是父母标签中唯一的孩子,因此您不必担心元素彼此缠绕在一起。通过使用内联块,宽度得到尊重,这为我们提供了应用背景颜色的好地方。
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
作为参考,可以预期您的标记将如下所示:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
我认为你会发现这会给你预期的效果。顺便说一下,这是一个通用的解决方案 - 但是如果你选择一个大于min-width
的{{1}},你将确保50%
类型的两个兄弟姐妹的范围太宽线。如果这样做,那么您可以省去标记中的额外inline-block
。