1

私は本当に基本的なことをしたい - 左の列の幅がコンテンツによって決定され（常に小さい）、右の列が残りの幅を取る2列のレイアウト。

完全な例はhttp://jsfiddle.net/EzHVX/2/にありますが、基本的に次のような HTML があります。

<div class="left">
   <div class="badge">all 15</div>    
</div>

<div class="right">
   <div class="badge">...</div>
   <div class="badge">...</div>    
  ....
</div>

そしてCSSの本質的な部分はただ::

.left {
    float: left;
}    

.right {
    float: left;
    width: 400px;
}

明示的な幅がないと、右の列が左の列に回り込み始めますが、これは望ましくありません。しかし、明示的な幅も使用したくありません。また、CSS は幅として「100% - 10em」をサポートしていません。また、サポートされていたとしても、「10em」をハードコーディングしたくありません。では、どのようなオプションがありますか?

4

4 に答える 4

1

overflow:hidden; 右のdivに仕事をします

あなたが与えたリンクを更新しました。これがうまくいくかどうか教えてください

http://jsfiddle.net/EzHVX/4/

于 2013-05-07T05:51:24.203 に答える
0

これを実現するために、いくつかのテーブル レイアウト CSS プロパティを使用できます。IE8 まで動作します。

jsフィドル

body > div {
    display: table-row;
    width: 100%;
}
.badge {
    background-color: #468847;
    border-radius: 9px;
    padding: 2px 9px;
    color: #ffffff;
    width: auto;
    display: inline-block;
    margin: 6px;
    white-space: nowrap;
}
.left {
    display: table-cell;
}
.right {
    display: table-cell;
}
于 2013-05-07T05:51:38.203 に答える
0

Flexレイアウトを使用して実装できます (古い IE はこれをサポートしていません)。

    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */     
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

例: http://jsfiddle.net/EzHVX/7/

于 2013-05-07T06:04:52.747 に答える