0

1 行に 2 つの div がある Web ページがあります。ただし、コンテンツが長すぎて表示できない場合は、2 行になることがあります。私の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

floatを使用して div を並べる代わりに、2 つの divdisplay:inline-blockを作成し、それらの親コンテナーにwhite-space:nowrap. <span>次に、 orなどの 2 つの通常はインライン要素のように動作します<img>。

代わりに (@frozenkoi によって推奨されているように)display:table-rowコンテナーとdiv display:table-cell(またはその他の合法的な組み合わせ) で使用します。

于 2013-09-16T23:11:01.693 に答える
1

width:autodiv の幅を div のコンテンツと等しくします。コンテンツが 1 行に収まらない場合は、2 行にまとめます。width:50%;それらを常に1行にするには、 、max-width:50%またはwidth: somevaluewheresomevalueが親の幅の半分以下になるようにすることができます。

両方の div の幅を常に 1 行に調整したい場合は、JavaScript を少し使用できます。これは、1 つの div が動的で、もう 1 つの 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 に依存することは、適切な方法とは見なされません。2 つの DIV ではなく、2 つの SPAN 要素を使用することを検討する必要があります。

ただし、本当に必要な場合は、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 がない場合、ブラウザーは、レイアウトを計算するときに、2 つの内側の DIV 要素を別々の行に最適に適合させることを決定することによって、それらを「ラップ」することを選択する場合があります。

詳細な説明:

display: inlineブロックではなく、この要素のテキストフローのようなレイアウトを作成するようにブラウザーに指示することを理解してください。

overflow: hiddenまた、との両方overflow-x: hiddenが、それぞれ垂直方向と水平方向のオーバーフロー動作に対処するために必要であることに注意してください。

最後に、適切なワードラップ動作は を使用しwhite-space: nowrapます。指定するword-break属性は、行が折り返される可能性がある場所にのみ関係し、折り返されるかどうかには関係しません。

ここで同様の質問を参照してください（CSS3以前の場合）。

于 2013-09-16T23:42:37.770 に答える
0

max-width を使用するか、パーセンテージ、em、または固定値を使用して幅のサイズを明示的に設定します。

または、コンテンツを p または span で囲み、そこで幅のサイズを調整することもできます。

于 2013-09-16T23:12:51.133 に答える