CSS Text Spalten

Question

Ich lerne gerade HTML/CSS und bin auf eine Herausforderung rund um Textspalten gestoßen. Ich versuche, www.campaignmonitor.com als Übungsübung neu zu erstellen.

Hier ist die Herausforderung:

ich einen Textbereich mit einem zweispaltigen Layout haben, mit 4 Textabsätze. Ich möchte die oberen zwei Absätze an der oberen Kante und die unteren zwei Absätze auch an ihren oberen Kanten ausgerichtet halten. Mit anderen Worten, wenn einer der oberen Absätze in der Höhe zunimmt, werden die unteren zwei Absätze beide zusammen nach unten bewegt.

Ich weiß, dass dies eine grundlegende Frage für Sie CSS-Pros sein kann, aber ich bin stumpf mit diesem und Online-Ressourcen, Tutorials und andere Websites haben mir keinen Erfolg gegeben.

Alle Hilfe ist willkommen!

Tom

---

Hier ist der Code, den ich mit:

<div class="content"> 
    <div class="row1"> 
    <div class="col1a"> 
     <h4>Create & send beautiful emails</h4> 
     <p>Design great looking emails using your own tools, or create templates and let your clients send their own.</p> 
    </div><!-- /end #col1a --> 
    <div class="col2a"> 
     <h4>Manage lists & subscribers</h4> 
     <p>We handle signups, unsubscribes and bounces automatically. Easily create targeted segments of subscribers.</p> 
    </div><!-- /end #col2a --> 
    </div><!-- /end #row1 --> 
    <div class="row2"> 
    <div class="col1b"> 
     <h4>Powerful Analytics</h4> 
     <p>Actionable reports that go beyond opens and clicks. Track your email related conversions and sales.</p> 
    </div><!-- /end #col1b --> 
    <div class="col2b"> 
     <h4>Mark-up, Resell and Profit</h4> 
     <p>White-label and rebrandable, you set the price your clients pay and we’ll send through your profit each month.</p> 
    </div><!-- /end #col2b --> 
    </div><!-- /end #row2 --> 
</div> 

Und die CSS:

.content { 
    width: 1024px; 
    margin: auto; 
    position: relative; 
    margin-top: 20px; 
    color: #333; 
    background-color: #666; 
} 

.col1a { 
    width: 225px; 
    margin-right: 20px; 
    display: block; 
    float: left; 
} 

.col2a { 
    width: 225px; 
    margin-right: 20px; 
    display: block; 
    float: left; 
} 

.col1b { 
    width: 225px; 
    margin-right: 20px; 
    display: block; 
    float: left; 
} 

.col2b { 
    width: 225px; 
    margin-right: 20px; 
    display: block; 
    float: left; 
} 

.row1 { 
    position: relative; 
    width: 490px; 
    background-color: orange; 
} 

.row2 { 
    position: relative; 
    width: 490px; 
    background-color: green; 
} 

.content h4 { 
    margin-top: 25px; 
    margin-bottom: 7px; 
    line-height: 22px; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 17px; 
} 

.content p { 
    font-size: 13px; 
    line-height: 18px; 
} 

Answer 1

hinzufügen clear: both den Zeilenelemente.

Ihr Element Namensgebung ganz überflüssig ist, col1a, col1b, col2a und col2b das gleiche tun, so dass sie alle einfach als col genannt werden können. Gleiches gilt für Zeilenelemente, die auch grenzwertig unbrauchbar sind.

http://jsfiddle.net/yTJTp/1/