Wie man diese zwei nebeneinander sitzen lässt?

Entschuldigung für die doppelte Frage, ich habe nach verwandten früheren Posts gesucht, alle sagten hinzufügen "float: left" zu beiden DIVs und/oder fügen "display: Inline-Block", aber keine Freude.Wie man diese zwei nebeneinander sitzen lässt?

Was ich erreichen möchte ist so etwas wie dieses: View post on imgur.com

Obwohl ich einige Marge/padding hinzufügen können, um das gleiche Ergebnis wie das Bild oben zu erreichen, aber wenn ich die Größe des Browser wie dies funktioniert es nicht funktioniert muss reagieren. Würdest du bitte helfen?

<style> 
body { 
width: 100%; 
} 

.wrapper { 
width: 80%; 
display: inline-block; 
} 

.order { 
float: left; 
} 

.content { 
width: 80%; 
display: inline-block; 
} 
</style> 

<body> 
<div class="wrapper"> 
    <div class="order">01/</div> 
    <div class="content"> 
     <h2 class='subject'>HERE IS THE SUBJECT</h2> 
     <p>oiwjefoj wefojiwe fjoiwefj woj wefojiwef wefjoiwef wjoeifjow ejowefjoi wfjowefjio wefnoiwjefohwf</p> 
    </div> 
</div> 
</body>

Quelle

2016-08-12 Kenny

Ihr Wrapper sollte die Breite von 100% haben. Legen Sie dann die Breite für die Reihenfolge 20% und 80% für den Inhalt fest und fügen Sie für jede Zeile einen Inline-Block hinzu. –

Verwendung

.order { 
    float: left; 
    width: 20%; 
    text-align: center; 
}

und Ihre Textgröße ändern und margin-top geben, um Text Text zu formatieren.

Quelle

2016-08-12 05:32:31

Danke Suresh, ich habe gerade versucht, was du vorgeschlagen hast, ein div für 20% und ein anderes für 80%, ich habe sogar das Box-Sizing-Ding darauf angewendet, aber jetzt befindet sich das "01 /" in der oberen linken Ecke, Ich habe ein Foto auf Imgur gemacht. Hast du etwas dagegen, es dir anzuschauen? http://imgur.com/a/oBXgT – Kenny

Lassen Sie den Wrapper haben width:100% dann legen Sie für die Reihenfolge Breite für 20% und 80% für den Inhalt und fügen Sie Inline-Block für jede von ihnen. siehe diese Geige. https://jsfiddle.net/cs4tspc0/

Quelle

2016-08-12 05:32:32

Dank Nelson, ich habe gerade die Codes überprüft, die Sie JS Fiddle, aber jetzt die "01 /" befindet sich in der oberen linken Ecke, die nicht was ist Ich möchte, ich habe ein Foto auf Imgur, http://imgur.com/a/oBXgT, gemacht. Macht es dir etwas aus? – Kenny

Es befindet sich wirklich in der oberen linken Ecke, da es keinen Rand oder Polsterung überhaupt hat. Ich passe bereits einige Abstände und Breiten des div an. Auch noch eine Sache. Entfernen Sie immer die Ränder auf dem Tag h1-h6. Manchmal ruiniert es dein Design. Siehe diese Geige. https://jsfiddle.net/cs4tspc0/2/ –

Wie man diese zwei nebeneinander sitzen lässt?

Antwort

Verwandte Themen