Von ein Drittel Spalten zu einer Hälfte Spalten

Question

Ich versuche, eine Liste von Bildern und Beschreibungen, die in Dreiergruppen bei größeren Breiten sind, und gehen Sie zu Zweiergruppen mit kleineren Breiten. Aber wenn ich kaputt gehe, wird es sehr durcheinander gebracht, und ich weiß nicht, was ich tun soll, damit es in saubere halbe Spalten zerfällt. Vielen Dank im Voraus für Ihre Hilfe!

div.thirds { 
 
\t padding-bottom: 20px; 
 
\t padding: 50px; 
 
\t text-align: center; 
 
\t font-family: Gudea; 
 
} 
 

 
div.button1 { 
 
\t width:90px; 
 
\t height:40px; 
 
\t margin-left: 38%; 
 
} 
 

 
div.one-third { 
 
\t width: 30%; 
 
\t float: left; 
 
\t margin-right: 5%; 
 
\t text-align: center; 
 
\t font-family: Gudea; 
 
} 
 

 
div.button2 { 
 
\t width:90px; 
 
\t height:40px; 
 
\t margin-left: 38%; 
 
} 
 

 
div.one-third-last { 
 
\t margin: 0; 
 
\t text-align: center; 
 
\t font-family: Gudea; 
 

 
} 
 

 
div.button3 { 
 
\t width:90px; 
 
\t height:40px; 
 
\t margin-left: 38%; 
 
} 
 

 
@media (maxwidth:900px;) 
 
div.one-third { 
 
\t width: 47.5%; 
 
} 
 

 
div.one-third-second { 
 
\t margin: 0; 
 
} 
 

 
div.one-third-last { 
 
\t clear: both; 
 
\t float: none; 
 
\t width: auto; 
 
\t padding: 20px 0 0 0; 
 
} 
 

 
div.one-third { 
 
\t width: 47.5%; 
 
} 
 

 
div.one-third-second { 
 
\t margin: 0; 
 
} 
 

 
div.one-third-last { 
 
\t clear: both; 
 
\t float: none; 
 
\t width: auto; 
 
\t padding: 20px 0 0 0; 
 
}

<div class="thirds clearfix"> 
 
\t 
 
\t <!-- one-third --> 
 
\t <div class="one-third mobile-collapse"> 
 
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" /> 
 
\t \t <h2>The Trainer</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <div class="button1"> 
 
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a> 
 
\t \t </div> 
 
\t </div><!--/one-third--> 
 
\t 
 
\t <!-- one-third --> 
 
\t <div class="one-third one-third-second mobile-collapse"> 
 
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" /> 
 
\t \t <h2>Lessons</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <div class="button2"> 
 
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a> 
 
\t \t </div> 
 
\t </div><!--/one-third--> 
 
\t 
 
\t <!-- one-third --> 
 
\t <div class="one-third one-third-fourth mobile-collapse"> 
 
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" /> 
 
\t \t <h2>Training</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <div class="button3"> 
 
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a> 
 
\t \t </div> 
 
\t </div><!--/one-third--> 
 
\t 
 
</div><!--/thirds--> 
 

 
<!-- thirds --> 
 
<div class="thirds clearfix"> 
 
\t 
 
\t <!-- one-third --> 
 
\t <div class="one-third mobile-collapse"> 
 
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" /> 
 
\t \t <h2>The Trainer</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <div class="button1"> 
 
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a> 
 
\t \t </div> 
 
\t </div><!--/one-third--> 
 
\t 
 
\t <!-- one-third --> 
 
\t <div class="one-third one-third-second mobile-collapse"> 
 
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" /> 
 
\t \t <h2>Lessons</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <div class="button2"> 
 
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a> 
 
\t \t </div> 
 
\t </div><!--/one-third--> 
 
\t 
 
\t <!-- one-third --> 
 
\t <div class="one-third one-third-last mobile-collapse"> 
 
\t \t <img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" /> 
 
\t \t <h2>Training</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <div class="button3"> 
 
\t \t \t <a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a> 
 
\t \t </div> 
 
\t </div><!--/one-third--> 
 
\t 
 
</div>

Answer 1

Sind Sie CSS Flex verwenden? Wenn es in Ihre minimale Stufe der erforderlichen CSS-Browser-Unterstützung passt, könnte es Ihnen wirklich viele Kopfschmerzen ersparen, mit denen Sie derzeit Schwierigkeiten haben, Floats zu verwalten.

CSS

.flex { 
    display: flex; 
} 
.wrap { 
    flex-wrap: wrap; 
} 
.item { 
    width: 33%; 
} 
@media (max-width: 900px) { 
    .item { 
    width: 50%; 
    } 
} 

HTML

<div class="flex wrap"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
    <div class="item">Item 6</div> 
</div> 

Sie das Beispiel erweitern können zusätzliche Markup innerhalb jeder .item Klasse aufzunehmen. Ich gebe ein größeres Beispiel hier - JSFiddle

Answer 2

Ich bin sicher, dass Ihr Problem um Prozentsatz Mischen und feste Werte. Versuchen Sie und denken Sie daran, dass Sie 100% zum Spielen haben. Wenn Sie zum Beispiel eine Breite von 48% mit einem festen Rand von zB 100px haben, was passiert, wenn 100px größer ist als die 2%, mit denen Sie spielen können? Probleme. Das ist, was.

Answer 3

Bootstrap ist der Weg zu gehen - das Folgende wird 2 Reihen von 3 Divs auf einem mittleren bis großen Ansichtsfenster anzeigen. 3 Reihen von 2 Divs auf einem kleinen Viewport. Beachten Sie, dass es auch eine col-lg-Klasse gibt, wenn Sie einen anderen Stil für große Bildschirme und eine col-sm-Klasse haben möchten, wenn Sie eine Klasse zwischen mobiler Größe (xs) und kleinem Bildschirm (sm) haben wollen, die ich auch nicht eingefügt habe der OP-Code in die Divs - ich wollte nur den Punkt demonstrieren:

Klicken Sie auf den Vollbild-Link im folgenden Ausschnitt, um die Änderungsposition des Divs abhängig von der Breite des Ansichtsfensters zu sehen. Ich fügte auch jedem einen Rand hinzu und zentrierte den Text - nur zu Demonstrationszwecken.

.container div{ 
 
    text-align:center; 
 
    border:solid 1px #ddd}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="col-md-4 col-xs-6">Content</div> 
 
    <div class="col-md-4 col-xs-6">Content</div> 
 
    <div class="col-md-4 col-xs-6">Content</div> 
 
    <div class="col-md-4 col-xs-6">Content</div> 
 
    <div class="col-md-4 col-xs-6">Content</div> 
 
    <div class="col-md-4 col-xs-6">Content</div> 
 
</div>