Wie kann ich sicherstellen, dass ein DIV sich seinem Inhalt anpasst?

Ich habe dieses HTML mit einem Tisch:Wie kann ich sicherstellen, dass ein DIV sich seinem Inhalt anpasst?

<div 
    class="currentDesignDiv" 
    style="margin-bottom:5px;"> 
    <div> 
    <img 
     alt="Thumbnail" 
     src="http://www.propertyware.com/templates/ 
     <bean:write name="currentTemplate" property="primaryKey"/> 
     /thumb.gif"/> 
    </div> 
    <div> 
    <table> 
     <tr> 
     <th>Your Current Design: </th> 
     <td>Template #: 
      <bean:write name="currentTemplate" property="primaryKey"/> 
     </td> 
     </tr> 
     <tr> 
     <th>Last Updated: </th> 
     <td> 
      <bean:write name="currentTemplate" property="modifiedByAsString"/> 
     </td> 
     </tr> 
     <tr> 
     <th>Total Pages: </th> 
     <td> 
      <bean:write name="numberOfPages"/> 
     </td> 
     </tr> 
    </table> 
    </div>

dieses CSS gestylt Being:

.currentDesignDiv{ 
    background-color:#e7e7e7; 
    border:1px solid #9c9c9c; 
    padding:5px; 
    width:100%; 
    min-width:860px; 
} 
.currentDesignDiv div{ 
    float:left; 
    width:33%; 
} 
.currentDesignDiv div table{ 
    font-size:9pt; 
    text-align:left; 
    margin:17px; 
} 
.currentDesignDiv div:first-child img{ 
    margin:17px; 
    width:80px; 
}

Es sieht auf meinem großen Monitor in Ordnung, aber wenn ich zu meinem kleinen Monitor ändere die am weitesten rechts stehenden div, die ein Bild enthält, schwebt außerhalb des übergeordneten div. Hat jemand dafür eine Lösung?

Quelle

2009-07-21 hdx

Bitte versuchen Sie beim nächsten Mal etwas Aufwand beim Formatieren Ihrer Code-Snippets. Niemand möchte wegen all dem Whitespace, den du zurückgelassen hast, herumrollen müssen. – Welbog

@Welbog: +1 für das .. – MarioRicalde

@hdx: Können Sie mir bitte das Bild geben, das Sie verwenden möchten? da "" sich herumspricht. – MarioRicalde

gesetzt

overflow: auto;

für den äußeren div. Dies sollte dazu führen, dass Ihr Elternelement div erweitert wird, obwohl seine untergeordneten Elemente über eine Float-Eigenschaft verfügen. (IE hat ein paar Probleme mit diesem, kann aber durch eine Polsterung fixiert werden)

Quelle

2009-07-21 19:47:46

Wenn Sie Probleme mit Bildlaufleisten haben, versuchen Sie es mit einem Überlauf: stattdessen ausgeblendet. Sie erhalten das gleiche genaue Verhalten, ohne die Möglichkeit von Bildlaufleisten. – jrista

@jrista Überlauf: versteckt schneidet den Text am Ende der div anstelle der div Erweiterung auf den gesamten Text passen und zeigt keine Bildlaufleiste entweder –

Ich glaube, das ist nur der Fall, wenn Sie tatsächlich eine Breite und Höhe angeben für das enthaltene div. Wenn Sie keine oder beide angeben, wird der Container erweitert, um die untergeordneten Elemente zu enthalten. – jrista

Float das Elternteil Div auch.

Dies bedeutet, dass untergeordnete Elemente, die floated sind, nicht aus ihr herausschweben.

Quelle

2009-07-21 19:23:09 edeverett

Vielleicht versuchen, die äußere div diese CSS geben ...

display: inline-block;

Da schwebende Elemente kein eigenes Layout haben, verhält sich das äußere div einfach wie ein leeres div und dehnt sich nicht aus, um die Elemente darin anzupassen.

Wenn Sie den äußeren div-Inline-Block erstellen, werden die inneren divs im äußeren div einen tatsächlichen Raum einnehmen.

Quelle

2009-07-21 19:28:23

Ich könnte das äußere div auch eine Breite von 99% anstelle von 100% geben, da Sie etwas Polsterung darauf haben. –

ich in der Regel geben:

overflow: hidden;

Ich hatte ein Problem, wenn ich gebe Überlauf: auto; manchmal kann das äußere div Bildlaufleiste anzeigen.

Quelle

2009-07-22 04:19:33 fluidbrush

Wie kann ich sicherstellen, dass ein DIV sich seinem Inhalt anpasst?

Antwort

Verwandte Themen