HTML/CSS - Wie zwei HTML-Elemente auf die Breite des Bildschirms zu strecken?

Question

Das ist, was ich habe:

Das Screenshot so breit wie das LCD-Display ist. Wie Sie sehen können, bleibt das Bild an der linken Seite des Bildschirms hängen, und der Bereich Level Informationen ist auf der rechten Seite des Bildes stecken. Das ist, was ich will. Allerdings würde ich auch gerne für den Rahmen um die Ebene Informationen Abschnitt den ganzen Weg bis zum rechten Rand des Bildschirms zu verlängern, wie dieser Mock-up ich in MSPaint gemacht:

Hier ist der Code für diesen Teil der Seite:

<div class="levelinfo" style="margin: 10px;"> 
    <span style="display: inline; float: left; margin-right: 10px; "> 
     <img src="levels/googoogjoob - By Request Only v1.1.screen.png" alt="Screenshot"> 
    </span> 
    <span style="display: inline-block; float: left; height: 240px;"> 
     <fieldset style="margin: 0px; padding: 0px; height: 239px;"> 
      <legend>Level information</legend> 
      <ul style="list-style-type: none; padding: 0px; margin: 5px;"> 
       [snip] 
      </ul> 
     </fieldset> 
    </span> 
</div> 

teil~~POS=TRUNC: Wie Sie sehen, ich bin ein fieldset mit, dass ziemlich wenig Rand um die Liste zu erstellen. Die Verwendung eines Fieldsets für rein kosmetische Zwecke erscheint jedoch nicht sehr "semantisch". Gibt es eine Methode, um diesen Effekt mit CSS oder zumindest einem anderen, vorzuziehenden HTML-Tag zu erzielen? Oder denken Sie, dass die Verwendung eines Fieldsets in Ordnung ist?

Answer 1

Ich würde normalerweise nur er in einem div wieder oder einen Tisch und tue width = 100% und das funktioniert überall dank

Answer 2

Dies sollte einfach sein. Nimm deinen ganzen Inhalt und wickle ihn in ein anderes div namens "Wrapper" oder so ähnlich. Geben Sie diesem div eine Breite von 100% und geben Sie diesem div eine Grenze von was auch immer Sie wollen.

zum Beispiel Ihre HTML wie folgt aus:

<div id="wrapper"> <!-- this is the div youll give the style to, to get the outline etc. --> 
    <div class="levelinfo" style="margin: 10px;"> 
    <span style="display: inline; float: left; margin-right: 10px; "> 
     <img src="levels/googoogjoob - By Request Only v1.1.screen.png" alt="Screenshot"> 
    </span> 
    <span style="display: inline-block; float: left; height: 240px;"> 
     <fieldset style="margin: 0px; padding: 0px; height: 239px;"> 
      <legend>Level information</legend> 
      <ul style="list-style-type: none; padding: 0px; margin: 5px;"> 
       [snip] 
      </ul> 
     </fieldset> 
    </span> 
</div> 
</div> 

css:

#wrapper{ 
width:100%; 
border: thin #ccc solid; 
} 

und das sollte es sein. Wenn Sie Ihre Seite neu laden, sollten Sie Ihren bereits erstellten Inhalt um die Grenze gewickelt sehen.

Hoffe es hilft dir.