it-swarm.com.de

xHTML/CSS: Wie lässt man das innere div 100% Breite abzüglich einer anderen div Breite erhalten?

Ich habe 2 verschachtelte Divs innerhalb der äußeren, die Breite hat: 100%. Beide verschachtelten Divs sollten sich in einer Zeile befinden und zuerst die Größe aus dem Inhalt erhalten:

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

Die Frage ist, wie man # inner2 div machen kann, um einen Rest des horizontalen Raums zu erhalten, wenn die Breite des # inner1 div nicht angegeben ist und davon abhängt, was sich darin befindet.

P.S. In meinem Fall befinden sich alle Stile in separaten Klassen. Hier habe ich CSS zur Vereinfachung in Stilattribute eingefügt.

Ich möchte, dass das Ergebnis in IE7 + und FF 3.6 funktioniert

In mehr Details sieht es für mich so aus:

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

Hier ist das Bild von dem, was ich will: Image of what I want

48
Artem

Der geheimnisvolle overflow: hidden; ist dein Freund hier. Es verhindert, dass sich Elemente neben den Schwimmern hinter dem Schwimmkörper erstrecken - ich denke, das ist das Layout, nach dem Sie suchen.

Hier ist etwas bearbeiteter HTML-Code: Ich glaube nicht, dass Sie #-Zeichen in Ihrer ids haben können:

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

Und hier ist das CSS, um das gewünschte Layout zu erreichen.

(Ich habe zusätzliches CSS für IE 6 mit HTML bedingten Kommentaren eingefügt. Ich habe gerade bemerkt, dass Sie es eigentlich nicht brauchen, um in IE 6 zu arbeiten, aber wenn Sie Lust auf nett zu sein IE 6 Benutzer da draußen ...)

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

Getestet und gearbeitet in IE 6, 7 und 8; Firefox 3,5; und Chrome 4.

85
Paul D. Waite

Wenn Sie dies jetzt lesen, können Sie wahrscheinlich calc verwenden.

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%;
}

Siehe das Arbeitsbeispiel auf JSFiddle .

2
fiatjaf

Ihr erstes Problem ist, dass Sie Ihren IDs ein '#' voranstellen. Das # wird nur in CSS verwendet, um auf das Element mit dieser ID zu verweisen, z. Die CSS-Regel #outer {width: 100%} bezieht sich auf Ihr Element:

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

Sie müssen auch keine Breiten für div (oder andere Blockelemente) verwenden, die nicht schwebend sind, da sie bereits 100% der verfügbaren Breite einnehmen. 

Wenn Sie möchten, dass die 2 DIVs in derselben Zeile angezeigt werden, müssen Sie den ersten nach links verschieben. Das benachbarte DIV wird dann auf der Seite angezeigt, und Sie müssen widthd für das zweite Element nicht angeben. Hier ist dein vollständiges Beispiel mit einem anderen farbigen Rand für jedes div.

Ich habe die Grenzen vergrößert, damit Sie klarer sehen können, was los ist.

<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

Eine andere Lösung besteht darin, ein Javascript auszuführen, das die Größe der captionLine-Klasse ändert, wenn das Dokument so geladen wurde.
Ich habe einige Zeit gebraucht, um es unter IE8 zum Laufen zu bringen, habe IE7 nicht probiert, sollte aber funktionieren.
2 Dinge zu beachten.

  1. IE unterstützt getElementsByClassName nicht, daher wird diese Funktion umgeschrieben .
  2. IE behandelt Ränder unterschiedlich, wenn Objekte mit style.marginLeft in der Größe verändert und verschoben werden. Irgendwie scheint IE den Rand in der Klassendeklaration zu behalten und fügt dies der neuen style.margin ..__ hinzu.
<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

Versuchen Sie folgendes: Verschachteln Sie inner1 in inner2 und entfernen Sie den display:inline aus inner2 wie folgt:

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

Sie können es hier sehen: http://jsbin.com/adiwi

0
graphicdivine

Die Antwort ist wirklich einfach! Wenn Sie auf der linken Seite ein festes div (Menü) festgelegt haben, geben Sie festes div float an: left und Ihr rechtes flexibles div margin-left das ist größer als die Breite des ersten fixen div.

0
Domen

Sie müssten das inner1 div so nach links schweben lassen:

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

Das sollte den Trick tun. Check it out! Tschüss

0
aefxx

Auf die Antwort von @Nasser Hajloo aufbauend, funktioniert das für mich (sogar in 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> 

Versuchen Sie es mit dem Hauptdiv., Das kleiner als 400px ist, um zu sehen, wie es sich anpasst. (Es funktioniert auch mit Divs und nicht mit Spannweiten - der Schlüssel ist die width: auto im ersten div/span.)

0
Traingamer

Es sieht so aus, als ob Sie versuchen, eine horizontale Linie zu erhalten, um den leeren Bereich in Ihrem div zu füllen. Wenn Sie richtig sind, erstellen Sie einen visuellen Effekt mit Markup. Korrigiere mich, wenn ich falsch liege.

(Wäre schön, ein Bild von dem zu sehen, was du willst)

Beispiel:

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

or

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

Dies ist keine bewährte Methode. Sie sollten versuchen, diesen Effekt mit CSS zu erzielen.

Versuchen Sie zunächst, Ihren Code semantischer zu gestalten:

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

Um die Zeile zu erhalten:

  1. erstellen Sie ein Bild mit der gewünschten Farbe
  2. stellen Sie die Höhe so ein, dass Sie die Linie in px haben möchten
  3. positionieren Sie es mit der backgroundproperty

.

#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

Sie müssen kein div für verschachtelte Elemente verwenden. Verwenden Sie einfach SPAN wie folgt

 <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