我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到我的范围table.
我正在尝试使用jQuery计算文本宽度.我不确定是什么,但我肯定做错了什么.
所以,这是代码:
var c = $('.calltoaction');
var cTxt = c.text();
var cWidth = cTxt.outerWidth();
c.css('width' , cWidth);
我想弄清楚flexbox如何工作(应该工作？...),如下所示:
.holder {
width: 500px;
background: lightgray;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
.v2 {
width: 320px;
}
.child {
display: inline-block;
border: 1px solid black;
padding: 30px 0px;
text-align: center;
}<div class="holder">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a
<br>glance</div>
<div class="child">After coverage …可能重复:
使CSS Div宽度等于内容
我试图像应用程序聊天,但现在我运行acros一些小错误.
我有一个div,最大宽度设置为350px.但是当我在其中添加以下文本时:
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
它将在每个空间添加新行,但div的宽度将保持在100px.我在jsFiddle中做了一个小例子:
正如你所看到的那样,黄色框的宽度是100px,而我希望它缩小到文本的宽度.我也尝试使用元素修复它,但黄色框保持不变.
我希望它看起来像第三个盒子,同时保留最大宽度部分.
有人知道黄色框会如何收缩到文本的宽度？
假设我有一个具有设定宽度的容器元素。我有一个带有显示内联块的内容元素，可以包含一些文本。该文本可能太大，以至于必须填写好几行。这样做的问题是，多行文本的默认行为是将元素增长到父元素的完整宽度。
想象一下下面的例子：
HTML：
<div class="container">
<div class="content">
Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
</div>
</div>
CSS：
.container {
width: 260px;
border: solid blue 1px;
}
.content {
display: inline-block;
background: red;
}
由于这些单词很长，因此它们将放置在多行上。我对该元素的期望.content是，它会增长到单行上最大单词的最大宽度。但正如您所看到的，因为它由多行组成，所以元素增长到最大宽度.container。
我想要实现的是，.content获得单行上最大项目的宽度，就像使用一个单行一样：
有什么方法可以用纯 css/html 来实现这一点吗？
我遇到了文本换行问题。
我希望我的项目内容居中（我已经这样做了justify-content: center;）
但是当文本换行时 - 我希望该文本向左对齐。
但是，当文本换行时，父元素的宽度自动为 100%。因此，虽然文本左对齐，但内容似乎并不居中，因为它无法真正以 100% 宽度居中。
我希望这是有道理的！！
任何帮助都会很棒！
这是我的问题的小提琴： https://jsfiddle.net/whqbonad/38/
.container {
width: 300px;
margin: 0 auto;
}
.item {
width: 50%;
float: left;
background: #e3e3e3;
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
}<div class='container'>
<div class='item'>
<span>Hello 1</span>
</div>
<div class='item'>
<span>Hello 2</span>
</div>
<div class='item'>
<span>Hello 3</span>
</div>
<div class='item'>
<span>Hello 4</span>
</div>
<div class='item'>
<span>Hello 5</span>
</div>
<div class='item'>
<span>Hello but longer!</span>
<!-- I …