2 Divs nach links, andere divs nach rechts

Question

Ich versuche, 2 divs auf der linken Seite und zwei div auf der rechten Seite zu floaten. Alle divs, die ich in einem Elternteil haben muss div.

Meine CSS:

.news { 
    width:50%; 
    float:right !important; 
} 
.news:first-child { 
    float:left; 
} 
.news:nth-child(2) { 
    float:left; 
} 

Mein HTML:

<div class="maindiv"> 
    <div class="news"> 
    <img src="fileadmin/user_upload11150532_956775297674176_4405300320161350202_n.jpg"> 
    <h2>aaaaaa4</h2> 
    </div> 
    <div class="news"> 
    <img src="fileadmin/user_upload11150532_956775297674176_4405300320161350202_n.jpg"> 
    <h2>aaaaaa4</h2> 
    </div> 
    <div class="news"> 
    <img src="fileadmin/user_upload/11150532_956775297674176_4405300320161350202_n.jpg"> 
    <h2>aaaaaa4</h2> 
    </div> 
</div> 

How it looks now

How it should look like

Answer 1

, warum Sie ein anderes Element nicht nehmen wie

.row{clear:both;} 
 
.image {float:left;width:50%;} 
 
.image-details {float:right;width:50%;} 
 
.image img {display:block;height:auto;width:100%;}

<div class="parent"> 
 
    <div class="row clearfix"> 
 
    <div class="image"><img src="http://placehold.it/350x150"></div> 
 
    <div class="image-details">some details <br>some details <br>some details <br></div> 
 
    </div> 
 
    <div class="row clearfix"> 
 
    <div class="image"><img src="http://placehold.it/350x150"></div> 
 
    <div class="image-details">some details <br>some details <br>some details <br>some details <br></div> 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie, diese sie nach links und rechts abwechselnd zu verteilen:

.news:nth-child(odd) { 
    float:left; 
} 
.news:nth-child(even) { 
    float:right; 
}