Styling zwei divs auf einer Reihe

-3

ich eine Website bin Gebäude: http://akce.region-tour.cz/ahoj-vsichni/Styling zwei divs auf einer Reihe

Wenn Sie nach unten scrollen, sehen Sie 4 Boxen (Bilder mit einem Link oben). Jedes Bild befindet sich jetzt in einer anderen Reihe. Was ich tun möchte, ist es um Stil, so gibt es zwei Reihen und jede Reihe zwei Boxen (siehe Bild)

THIS IS HOW I WANT IT

<div style="width: 400px;"><a href="www.region-tour.cz/krkonose">Krkonoše</a><img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div> 
 

 
<div style="width: 400px;"><a href="http://www.region-tour.cz/ubytovani-ceske-svycarsko/ubytovani-luzicke-hory/">Lužické hory</a><img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div> 
 

 
<div style="width: 400px;"><a href="www.region-tour.cz/orlicke-hory">Krkonoše</a><img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div> 
 

 
<div style="width: 400px;"><a href="www.region-tour.cz/jizeske-hory">Jizerské hory</a><img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>

Quelle

2017-08-29 pajicekkralicek

Verwendung Bootstrap-Klasse "col-md-6" für jedes div –

@PadmaRubhan i nicht Bootstrap bin mit – pajicekkralicek

bitte Verwenden Sie kein Bootstrap – HollerTrain

Sie zwei Reihen machen würde, und jede Reihe hat einen rechten und linken div

.row { 
 
    float:left; 
 
    width:100%; 
 
    margin:1em 0; 
 
    } 
 
    .row .left { 
 
    width:48%; 
 
    float:left; 
 
    } 
 
    .row .right { 
 
    width:48%; 
 
    float:right; 
 
    }

<div class="row"> 
 
    <div class="left">img here</div> 
 
    <div class="right">img here</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="left">img here</div> 
 
    <div class="right">img here</div> 
 
    </div>

Mein Beispiel oben ist sauber HTML und CSS und vollständig ansprechend.

Quelle

2017-08-29 13:22:12 HollerTrain

Nur ein Problem jetzt, wenn ich die Links vor dem Bild innerhalb div hinzufügen, werden sie nicht alle angezeigt. Beispiel: Krkonoše zeigt "noše" @HollerTrain – pajicekkralicek

ein jsfillde Konto abholen und mir dort zeigen. Sie müssen natürlich einen Link zu jedem Link hinzufügen. – HollerTrain

Es gibt zahlreiche Lösungen und @HollerTrain bietet eine saubere Lösung. Hier ist eine andere Lösung mit CSS3 flexbox, die ich als ein hervorragendes Konstrukt für die Bereitstellung flexibler Layouts finde.

CSS

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    width: 850px; 
} 

.flex-container div { 
    width: 400px; 
    height: 160px; 
    margin: 10px; 
}

HTML

<div class="flex-container"> 
<div style="width: 400px;"><a href="www.region-tour.cz/krkonose">Krkonoše</a><img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div> 

<div style="width: 400px;"><a href="http://www.region-tour.cz/ubytovani-ceske-svycarsko/ubytovani-luzicke-hory/">Lužické hory</a><img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div> 

<div style="width: 400px;"><a href="www.region-tour.cz/orlicke-hory">Krkonoše</a><img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div> 

<div style="width: 400px;"><a href="www.region-tour.cz/jizeske-hory">Jizerské hory</a><img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div> 
</div>

Fiddle

Quelle

2017-08-29 13:36:19 jfeferman

Das wäre großartig, wenn es reaktionsfähig wäre ... – pajicekkralicek

Sie können es definitiv reaktionsfähig machen, indem Sie eine prozentuale Breite auf Flex-Container wie 100% oder 100vw des Ansichtsfensters verwenden. Blöcke werden je nach verfügbarem Speicherplatz umbrochen. – jfeferman

<html> 
    <head> 
    <style> 

    .row{ 
    width:100%; 
    float:left; 
    margin:0 auto; 
    } 

    .colum1{ 
    width:48%; 
    float:left; 
    margin:0 auto; 
    } 

    .colum2{ 
    width:48%; 
    float:right; 
    margin:0 auto; 
    } 

    .colum3{ 
    width:48%; 
    float:left; 
    margin:0 auto; 
    } 

    .colum4{ 
    width:48%; 
    float:right; 
    margin:0 auto; 
    } 

</style> 
    </head> 
    <body> 
    <div class="row"> 
     <div class="colum1"> 
      content here.. 
     </div> 
     <div class="colum2"> 
      content here.. 
     </div> 
     <div class="colum3"> 
      content here.. 
     </div> 
     <div class="colum4"> 
      content here.. 
     </div> 
    </div><!-- ./row --> 
    </body> 
</html>

Quelle

2017-08-29 13:36:51

Ihre doppelten CSS-Deklarationen für eine Spalte ist wirklich störend. – HollerTrain

Styling zwei divs auf einer Reihe

Antwort

Verwandte Themen