50

3 列のレイアウトを作成しようとしています。左右の列の幅を、子のコンテンツと同じ幅にしたいと思います。中央の柱を広げて残りのスペースを埋めたいです。

私は次のことを試しています（概要、以下にjsfiddleリンクが含まれています）：

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

フィドル: http://jsfiddle.net/5kszQ/

ただし、コンテンツが長すぎると、中央の列が右の列を下に押し込みます。3 つの列すべてをインラインにして、必要に応じて中央の列を縮小したいと考えています。これは上記が私に与えているものです：

ここに画像の説明を入力

代わりに私はしたい：

ここに画像の説明を入力

助けてくれてありがとう

4

5 に答える 5

20

いくつかの HTML の変更を受け入れている場合は、これで正確に必要なものが得られるはずです。

<div id="parent" style="width:100%">  
  <div id="colLeft">left</div>
  <div id="colwrap">
      <div id="colRight">right</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>  
    </div>
</div>

css は次のようになります。

html, body {
  margin: 0px;
  padding: 0px;
}
#parent {
  background-color: #eee;
  height: 48px;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colwrap{
    overflow:hidden;
    background-color: orange;      
}
#colCenter {
  height: 48px;  
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

jsFiddle: http://jsfiddle.net/gajbhiye/ZX97K/お役に立てば幸いです。

于 2013-03-16T08:30:09.100 に答える
3

中央と右の要素に大きな余白を追加することですべてが 1 行に収まり、相対的な配置でそれを補うとブラウザをだます。更新された fiddleを参照してください。

マークアップ: そのまま残ります。

スタイル：

#parent {
  background-color: #eee;
  height: 48px;
  overflow: hidden;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colCenter {
  background-color: orange;
  height: 48px;
  float: left;
  margin-left: -2000px;
  position: relative;
  left: 2000px;
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
  margin-right: -2000px;
  position: relative;
  left: -2000px;
}
于 2013-03-16T09:52:08.853 に答える
0

これを試してみてください

<html>
<head>
    <style type="text/css">
        #parent {
          word-break:break-all;
        }
        #colLeft {
          float:left;
          max-width: 5%;
        }
        #colCenter {
          float:left;
          max-width: 90%;
        }
        #colRight {
          float: right;
          max-width: 5%;
        }
    </style>
</head>
<body>
    <div id="parent" style="width:100%">
      <div id="colLeft">leftawefawefawefawef</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjl</div>
      <div id="colRight">rightaewfaewfawefawef</div>
    </div>
</body>

于 2013-03-16T04:08:13.163 に答える
-1

子 div をテーブル セルに配置し、テーブルを親 div に配置するだけです。スタイリングは必要ありません

<div id="parent" style="width: 100%">
 <table>
  <tr>
   <td><div id="colLeft">left</div></td>
   <td><div id="colCenter">Some really long text in the center. Some really long text in the center.</div></td>
   <td><div id="colRight">right</div></td>
  </tr>
 </table>
</div>
于 2020-11-14T14:24:30.080 に答える