0

このフィドルを見てください。

次の 2 つのクラスの動作が異なります。

.class2 {
    width: 49.5%;
    display: inline-block;
}

.class3 {
    width: 50%;    /* Wraps to next line */
    display: inline-block;
}
  • 私がやりたかったのは、幅を 2 ​​つの div で均等に分割し、各 div * を独自のコンテンツで埋め始めることです。
  • しかし、幅が 50% の場合、div にテキストを入れると、2 番目の div が次の行に折り返されます。
  • 幅 49.x% では折り返しません。

なんでラッピングなの？特定のdiv内で作業しています。

折り返さずに幅を 50% に保つにはどうすればよいですか。

50% 以外の正しい値を求める方法がわかりません。

4

7 に答える 7

1

に頼る必要はありませんfloat。これは比較的醜い回避策であり、独自の問題が発生します（フロートをクリアしたりoverflow:hidden、包含要素に設定したりする必要があります）。

HTMLマークアップを提供していませんが、エイリアン氏の回答のように、要素間に空白があると思います。

より良い解決策については、2つのインラインブロック、幅50％の要素が2行目に折り返されるを参照してください。

于 2013-02-06T08:54:24.717 に答える
1

次のように div をフローティングしてみてください。

.class1 {
    background-color: red;
    width: 100%;    
}
.class2 {
    width: 50%;
    display: inline-block;
    background-color: blue;
    color: white;
    float:left;    
}
.class3 {
    width: 50%;
    display: inline-block;
    background-color: blue;
    color: white;
    float:right;
}
于 2012-07-29T06:06:03.140 に答える
0

私はよくdisplay:inline-block;を使用します。.

ただし、display:inline-blockには問題があります。

私はGrids - Pureパターンをお勧めし、Pure のようなサンプル コードを作成しました。

.class1 {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
    font-family: Georgia, Times, "Times New Roman", serif;
}

.class2, .class3 {
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
    font-family: "Hiragino Kaku Gothic ProN",Meiryo,Verdana,sans-serif;
    width: 50%;
}

私のフィドル

于 2013-12-23T18:29:45.813 に答える
0

フロートは使用しないでください。あらゆる種類の頭痛の種になります。これを CSS に追加するだけです。

body,html{ white-space:nowrap; }
a,pre,p,span,strong,h1,h2,h3,h4,h5,h6{ white-space:normal; }

...次に、サイトのすべてのテキストが「p」または「span」のいずれかに含まれていることを確認します

于 2013-12-23T18:06:22.497 に答える
0

を使用して左側にfloat: left;1 番目をフロートさせ、フローティング要素をクリアするために使用するよりも、右側に 2 番目をフロートさせることもできます。<div><div>float: right;<div style="clear: both;"></div>

CSS :

.class1 {
    background-color: red;
    width: 100%;
}
.class2 {
    width: 50%;
    background-color: blue;
    color: white;
    float: left;
}

.class3 {
background-color: green;
    width: 50%;
    float: right;
}

HTML :

<div class="class1">
  <div class="class2">
      This is demo
  </div>
      <div class="class3">
          This is demo          
    </div>
  <div style="clear: both;">
</div>

私のフィドル

于 2012-07-29T06:04:43.980 に答える
-1

入れてください：

margin:-2px;

あなたのクラスに3。これはdivを壊しませんが、問題を解決します。理由がわからない

于 2012-07-29T06:07:45.633 に答える