web-dev-qa-db-ja.com

インラインdivを同じ行に留めるにはどうすればよいですか？

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列すべてをインラインにし、必要に応じて中央の列を縮小したいと思います。これは上記が私に与えているものです：

enter image description here

代わりに私がしたい：

enter image description here

助けてくれてありがとう

htmlcssword-wrap
42
user1219278

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/ 役に立てば幸いです。

18
Dinesh Gajbhiye

左と中央にinline-blockを使用し、右の要素にposition:absoluteを使用する1つのメソッドを次に示します。

Example

jsFiddle

[〜＃〜] html [〜＃〜]

<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>

[〜＃〜] css [〜＃〜]

html, body {
    margin: 0px;
    padding: 0px;
}
#parent {
    background-color: #eee;
    height: 48px;
    position:relative;
    overflow:hidden;
    white-space: nowrap;
}
#colLeft {
    background-color: #ff8b8b;
    height: 48px;
    display: inline-block;
}
#colCenter {
    background-color: orange;
    height: 48px;
    display: inline-block;
    overflow: hidden;
}
#colRight {
    background-color: #c3d0ff;
    height: 48px;
    display: inline;
    float: right;
    position:absolute;
    top:0;
    right:0;
}

inline-blockに依存しているため、<div>sの間にコメントがあり、この画像に示されている間隔を取り除きます。

Ugly spacing

text-overflow：Ellipsis

text-overflow:Ellipsisを使用するときにこれを実現するには、JavaScriptにフォールバックする必要がある場合があります（ jsFiddle ）。

Ellipsis using JavaScript

window.onresize = updateDimensions;

function updateDimensions() {
    var parent = document.getElementById('parent');
    var left = document.getElementById('colLeft');
    var right = document.getElementById('colRight');
    var middle = document.getElementById('colCenter');

    middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth)  + 'px';
}
20
Daniel Imms

中央の要素と右の要素に大きなマージンを追加することで、すべてが1行にぴったり収まると言って、ブラウザを欺き、相対的な配置でそれを補正します。 更新されたフィドルを参照してください。

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

スタイル：

#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;
}
3
NGLN

パーセンテージを使用する-パーセンテージだけを考えれば、きれいなレイアウトを維持できます。フロートまたはインラインブロックは、ページに十分なスペースがある場合、次の行に移動しません。

外側の要素の幅は20％で、中央の要素の幅は50％です。これにより、ページの90％が追加されるため、オーバーフローしません。希望する場合は、ページを埋めるのにより正確にすることができますが、パディングとレイアウトを台無しにする可能性のあるマージンに注意する必要があります。

ここにフィデがあります： https://jsfiddle.net/VVarPiglet/Lsy2rquk/

<div class="parent">
<div class="subParenet">
<div class="left outer inlineBlock">
    <img class="image" src="http://alexoliveira.me/Hawaii/images/chevron- left.png" />
</div>
<div class="middle inlineBlock"></div>
<div class="right outer inlineBlock">
  img class="image" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
</div>
</div>
</div>

CSS

.inlineBlock{
  display: inline-block;
}
.middle{
  background: blue;
  width: 50%;
  height: 215px;
}
.image{
  width:100%;
}
.outer{
  background: red;
  width: 20%;
}
.subparent{
  display: inline-block;
  width:100%;
}
1
Elijah Tate

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

<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>
0
brian