Question

我正在建立一个网站：http://akce.region-tour.cz/ahoj-vsichni/

如果向下滚动，您将看到4个框（上面带有链接的图片）。现在每个图像都在不同的行上。我想要做的是设置它，因此有两行，每行有两个框（见图）

＆＃13;

 <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>

＆＃13;

Answer 1

你会做两行，每行都有一个左右div

＆＃13;

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

＆＃13;

<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>

＆＃13;

我上面的例子是干净的html和css，并且完全响应。

Answer 2

有许多解决方案，而@HollerTrain提供了一个干净的解决方案。这是一个使用CSS3 flexbox的不同解决方案，我发现它是一个很好的结构，可以提供灵活的布局。

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

Answer 3

<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>

在一行上设置两个div的样式

3 个答案: