0

我有一个网页在一行中有两个 div。但是，有时它们会变成两行，因为内容太长而无法显示。我的CSS如下：

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0px 0px 6px #B2B2B2;
    height: auto;
    margin: 10px;
    padding: 5px;
    width: auto;
    float: left;
    word-break: break-all;
    overflow:hidden;    
}

这是html：

<div class="bubble"></div>
<div class="bubble"></div>

我怎样才能让它总是在一条线上？谢谢

4

5 回答 5

1

width:auto将使 div 的宽度等于 div 的内容。当内容对于一行来说太长时，它会将它们撞到两行。要使它们始终在一条线上，您可以执行类似width:50%;,max-width:50%或width: somevaluewheresomevalue小于或等于父宽度的一半的操作。

如果您希望两个 div 都具有始终为单行的可调节宽度，您可以使用一点 JavaScript。这假设您有一个 div 是动态的，另一个将“填充”，并且您正在使用 jQuery：

$(document).ready(function(){
    var parent_width = SOME_VALUE;
    var primary_width = $('.bubble.primary').width();
    var secondary_width = parent_width - primary_width;
    $('.bubble.secondary').css('width', secondary_width);
});
于 2013-09-16T23:14:30.507 回答
1

通常，依赖 DIV 来分割必须在单行中呈现的标记并不是一种好的做法。您应该考虑使用两个 SPAN 元素而不是两个 DIV。

但是，如果您真的必须，您可以将 CSS3 样式添加到您的 DIV 以使其“表现得像”一个 SPAN。这是CSS：

div.nowrap {
  display: inline;
  overflow: hidden;
  overflow-x: hidden;
  white-space: nowrap;
}

您还需要将两个 DIV 元素包装在外部 DIV 中。这是因为 CSS 样式将作用于每个单独的 DIV 及其内容，并且浏览器在计算其布局时将独立处理它们。所以，标记看起来像：

<div id='outer' class='nowrap'>
   <div id='inner1' class='nowrap'>This is a very very long line.</div>
   <div id='inner2' class='nowrap'>This is another very very long line.</div>
</div>

如果没有外部 DIV，浏览器可以在计算布局时选择“包装”两个内部 DIV 元素，方法是确定它们最适合单独的行。

详细解释：

理解这display: inline将告诉浏览器为此元素而不是块创建类似文本流的布局。

另请注意，需要overflow: hidden和overflow-x: hidden来分别解决垂直和水平方向上的溢出行为。

最后，适当的自动换行行为使用white-space: nowrap. 您指定的word-break属性仅与可能换行的位置有关，与是否换行无关。

请参阅此处的类似问题（针对 CSS3 之前的版本）。

于 2013-09-16T23:42:37.770 回答
1

而不是使用float来使您的 div 并排，使两个 divdisplay:inline-block并使其父容器具有white-space:nowrap. 然后它们将表现得像两个正常的内联元素，例如<span>or <img>。

或者（正如@frozenkoi 所建议的那样）display:table-row在容器和display:table-celldiv（或其他合法组合）上使用。

于 2013-09-16T23:11:01.693 回答
0

使用 max-width 或使用百分比、em 或固定值显式设置宽度的大小。

或者您可以将内容包含在 p 或 span 中并在那里调整宽度大小。

于 2013-09-16T23:12:51.133 回答
0

尝试这样的事情：

    <style>
    #a
    {
    position:relative;
    overflow:hidden;
    width:50%;
    float:left;
    }
    #b
    {
    position:relative;
    overflow:hidden;
    width:50%;
    float:right;
    }


 #container
    {
    position:relative;
    width:100%;
    }
    </style>
<div id=container>
    <div id="a" >
    <p>TEXT</p>
    </div>

    <div id="b"> 
    <p>TEXT</p>
    </div>
</div>
于 2013-09-16T23:08:03.510 回答