web-dev-qa-db-ja.com

xHTML / CSS：内側のdivが100％の幅から別のdivの幅を引いたものにする方法

外側の内側に2つのネストされたdivがあり、その幅は100％です。ネストされたdivは両方とも1行で、最初にそのコンテンツからサイズを取得する必要があります。

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner1" style="border:1px; display:inline">
    inner div 1. Some text...
  </div>
  <div id="#inner2" style="width:100%????; border:1px; display:inline">
    inner div 2...
  </div>
</div>

質問は、＃inner1 divの幅が指定されておらず、中にあるものに依存している場合、＃inner2 divを作成して水平スペースの残りを取得する方法ですか？

追伸私の場合、すべてのスタイルは別々のクラスにあります。ここでは、単純化のためにCSSをスタイル属性に入れています。

IE7 +およびFF 3.6で結果を機能させたい

私にとってより詳細には、次のようになります。

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

これが私が欲しいもののイメージです： Image of what I want

cssxhtmlhtmlxhtml-1.0-strict
49
Artem

神秘的なoverflow: hidden;はあなたの友達です。フロートに隣接する要素がフロートの後ろに広がるのを防ぎます。これが探しているレイアウトだと思います。

次に、少し編集したHTMLを示します。idsに#文字を含めることはできないと思います。

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

そして、これが目的のレイアウトを実現するためのCSSです。

（IE 6 with HTML 条件付きコメント に追加のCSSを追加しました。IE 6もありますが、IE 6人がそこにいる...）

<style type="text/css">
#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}

#inner1 {
    margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->

IE 6、7、and 8; Firefox 3.5; and Chrome 4。

85
Paul D. Waite

今これを読んでいるなら、おそらく calc を使用できます。

[〜＃〜] html [〜＃〜]

<div class="universe">
  <div class="somewidth">
  </div>
  <div class="everythingelse">
  </div>
</div>

[〜＃〜] css [〜＃〜]

.universe {
  width: 100%;
  height: 100%;
}

.somewidth {
  width: 200px;
  height: 100%;
}

.everythingelse {
  width: 800px; /* fallback for emergencies */
  width: calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  height: 100%;
}

JSFiddleでの作業例 を参照してください。

3
fiatjaf

最初の問題は、IDの前に「＃」を付けることです。 ＃はCSSでそのidを持つ要素を参照するためにのみ使用されます。 CSSルール＃outer {width：100％}は要素を参照します：

<div id="outer"></div>

また、フロートされていないdiv（またはその他のブロック要素）で幅を使用する必要はありません。既に使用可能な幅の100％をすでに占有しているためです。

2つのDIVを同じ行に表示するには、最初のDIVを左にフロートさせる必要があります。隣接するDIVが横に表示されます。この場合も、2番目の要素の幅を指定する必要はありません。以下に、divごとに異なる色の境界線を含む完全な例を示します。

境界線を大きくしたので、何が起こっているかがより明確にわかります。

<html><body>
<style type="text/css">
#outer {
    border: solid 5px #c00;
}
#inner1 {
    border: solid 5px #0c0;
    float: left;
    width: 200px;
    height: 300px;
}
#inner2 {
    border: solid 5px #00c;
    height: 300px;
    margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>

<div id="outer">
  <div id="inner1">
    inner div 1. Some text...
  </div>
  <div id="inner2">
    inner div 2...
  </div>
</div>

</body></html>
0
mythz

別の解決策は、ドキュメントがこのようにロードされたときにcaptionLineクラスのサイズを変更するjavascriptを実行することです。
IE8で動作するように少し時間をかけてください。IE7を試したことはありませんが、動作するはずです。
2つの注意点。

  1. IEはgetElementsByClassNameをサポートしないため、この関数は書き換えられます。
  2. IEは、style.marginLeftを使用してオブジェクトのサイズを変更して移動すると、マージンを異なる方法で処理します。何らかの方法でIEはクラス宣言でマージンを保持しているようで、これを新しいstyle.marginに追加します。
<body onload="resizeCaptionLine()">
<style>
caption {
 border: 1px solid blue;
 padding: 0px;
}
.captionText {
 border: 1px solid red;
 float: left;
}
.captionLine {
 background-color:black;
 margin: 0px;
 margin: 5px 0px 0px 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
</style>

<table style="width:300px;">
<caption width="100%" name="caption1">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

<script type="text/javascript">

function getElementsByClassName(node, class_name) {
  elems = node.all || node.getElementsByTagName('*');
  var arr = new Array();
  for(j = 0; j < elems.length; j++)
  {
    if (elems[j].className == class_name)
       arr[arr.length] = elems[j];
  }
  return arr;
}

function resizeCaptionLine()
{
 var elems = getElementsByClassName(document, 'captionLine');
 for(i = 0; i < elems.length ; i++)
 {
   var parent = elems[i].parentNode;
   var sibling = getElementsByClassName(parent, 'captionText');
   var width = parent.offsetWidth - sibling[0].offsetWidth;

    if(elems[i].currentStyle)
   {
     var currentMargin = elems[i].currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   else if (document.defaultView && document.defaultView.getComputedStyle)
   {
     var currentStyle = document.defaultView.getComputedStyle(elems[i], '');
     var currentMargin = currentStyle.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
   }
   else
   {
     var currentMargin = elems[i].style.marginLeft;
     var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
     elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
   }
   elems[i].style.width = (width - margin)+"px";
 } 
}
</script>
</body>
0
Erik

これを試してください：ネストinner1内部inner2、およびdisplay:inline from inner2、 このような：

<div id="#outer" style="width:100%; border:1px solid red">
  <div id="#inner2" style="width:100%; border:1px solid black;">
     <div id="#inner1" style="border:1px solid blue; display:inline">
      inner div 1. Some text...
     </div>
  inner div 2...
  </div>
</div>

ここで動作していることがわかります： http://jsbin.com/adiwi

0
graphicdivine

答えは本当に簡単です！左側にdiv（メニュー）を修正した場合、fixed div float：leftと、右の柔軟なdiv margin-leftを最初のfixedの幅より大きくしますdiv。

0
Domen

次のように、inner1 divを左にフロートする必要があります。

<div id="#outer" ....>
    <div id='#inner1" style="float:left; border: 1px solid #000;">
        blabla
    </div>
    <div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ...">
        gnihihi
    </div>
</div>

これでうまくいくはずです。見てみな！さようなら

0
aefxx

@Nasser Hajlooの答えを拡張すると、これは私にとっても有効です（IE6でも）

 <div style="width: 400px; border: solid 1px red;"> 
     <span style="float:left;width: auto;border: solid 1px black;"> 
            hey you 
     </span> 
     <div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div> 
 </div>

メインdivを400pxより小さくしてみて、調整方法を確認してください。 （スパンではなくdivでも機能します。キーは最初のdiv/spanのwidth：autoです。）

0
Traingamer

コードから、divの空のスペースを埋めるために水平線を取得しようとしているようです。マークアップで視覚効果を作成するためにあなたの見方が正しければ。間違っている場合は修正してください。

（あなたが望むものの画像を見るのは素晴らしいでしょう）

例：

Title ---------------------------

or

Title: Caption ------------------

これはベストプラクティスではありません。 CSSでこの効果を得ようとする必要があります。

最初にコードをより意味的にするようにしてください：

<div id="#outer" style="width:100%; border:1px">
  <h3 style="border:1px; display:inline">
    Caption
  </h3>
</div>

行を取得するには：

  1. 希望の色で画像を作成します
  2. 行の高さをpxにするのと同じにします
  3. backgroundプロパティで配置します

。

#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}

#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url('image path') center left; /* position the image */
}
0
Kevin

ネストされた要素にdivを使用する必要はありません。このようにSPANを使用するだけです

 <div>
     <span style="display:inline-block;width: auto;border: solid 1px black;">
            hey you
     </span>
     <span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
           always use proper tools.
     </span>
 </div>
0
Nasser Hadjloo