Question

我尝试用引导程序在彼此之下获得一些div。我有这个用于HTML：

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>
    <div class="linkblok hidden-xs" ><a href="http://www.sfg.nl">Bekijk de site van &gt;</a></div>
    <div class="img-responsive"><a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a></div>
    <div class="linkblok hidden-xs" ><a href="https://www.vlietlandziekenhuis.nl/">Bekijk de site van &gt;</a></div>
    <div class="img-responsive"><a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a></div>        
</div>

这是我的css：

.linksblok div {
    margin:20px;
    display:inline-block;   
}

.linkblok {
    background-color:#68b022;
    padding:20px;
    color:#ffffff;
    border:1px solid #68b022;
    margin:-1px;
}
.linkblok.active {
    background-color:#3d6f1c;
}
.linkblok a,.linkblok a:active,.linkblok a:visited {
    color:#ffffff;

我还添加了一个截图，它现在看起来像。

但是最低的绿色块必须与上面的绿色块在同一条线上。并且图像必须在同一条线上彼此完全相同。

谢谢

如果我这样做，它现在看起来像这样：

.linksblok div {
    margin:20px;
    display:block;
    width:150px;
}

如果我这样做：

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>
    <div class="row">
        <div class="linkblok hidden-xs col-sm-offset-5 col-sm-5"><a href="http://www.sfg.nl">Bekijk de site van &gt;</a></div>
        <div class="img-responsive col-sm-4 col-sm-offset-2"><a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a></div>
    </div>

    <div class="row">
     <div class="linkblok hidden-xs col-sm-offset-5 col-sm-5"><a href="http://www.sfg.nl">Bekijk de site van &gt;</a></div> 
        <div class="img-responsive col-sm-4 col-sm-offset-2"><a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a></div>
    </div>       
</div>

然后它看起来像这样：

在开始时它必须是这样的：

但是如果你把它缩小，那么它必须在彼此之下，但是已经对齐（绿色框）。

我这样试试：

<div class="text-center linksblok">
<div class="row">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>

    <div class="row">
    <div class="linkblok hidden-xs" ><a href="http://www.sfg.nl">Bekijk de site van &gt;</a></div>
    <div><a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a></div>
    </div>

    <div class="row">

    <div class="linkblok hidden-xs" ><a href="https://www.vlietlandziekenhuis.nl/">Bekijk de site van &gt;</a></div>
    <div><a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a></div>
    </div>
</div>
</div>

但是它仍然看起来像这样：

我现在就这样：

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>
    <div class="row">

        <div class="linkblok hidden-xs col-md-3 col-sm-4">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div>
        <div class="img-responsive col-md-3 col-sm-4">
          <a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a>
        </div>
        <div class="linkblok hidden-xs col-md-3 col-sm-4">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div> 
        <div class="img-responsive col-md-3 col-sm-4">
          <a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a>
        </div>

</div>
</div>

它几乎可以工作。如果你把它做得更小它会呈现正确的。但如果你有全屏，它看起来像这样：

我现在就这样：

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>
    <div class="row">

       <div class="col-xs-12 col-ms-12">


        <div class="linkblok hidden-xs col-md-3 col-sm-4">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div>

        <div class="img-responsive col-md-3 col-sm-4">
          <a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a>
        </div>

        <div class="linkblok hidden-xs col-md-3 col-sm-4">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div> 

        <div class="img-responsive col-md-3 col-sm-4">
          <a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a>
        </div>


</div>
</div>
</div>

但最后一个徽标仍在其余部分，而不在同一行

我现在就这样：

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>


    <div class="row">



        <div class="linkblok hidden-xs  col-sm-4 col-lg-3">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div>


        <div class="img-responsive  col-sm-4 col-lg-3">
          <a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}"  alt="logo sfg"/></a>
        </div>

        <div class="linkblok hidden-xs  col-sm-4 col-lg-3">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div> 

        <div class="img-responsive  col-sm-4 col-lg-3">
          <a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a>
        </div>


</div>
</div>

但是最后一张图片仍然在其他三张图片之下，而不是在同一条线上

Answer 1

我认为您应该使用Bootstrap网格系统。看看http://getbootstrap.com/css/#grid。

它应该是这样的：

<div class="container">
    <div class="row">
        <div class="col-xs-8 center-block">
            <div class="col-xs-6">
                <img src="http://placehold.it/300x100">
            </div>
            <div class="col-xs-6">
                <img src="http://placehold.it/300x100">
            </div>
        </div>
  </div>

  <div class="row top-buffer">
        <div class="col-xs-8 center-block">
            <div class="col-xs-6">
                <img src="http://placehold.it/300x100">
            </div>
            <div class="col-xs-6">
                <img src="http://placehold.it/300x100">
            </div>
        </div>
    </div>
</div>

如果您想要响应，您应该更改/添加类到col-xs-6 div。

这是一个显示其工作原理的CodePen：http://codepen.io/anon/pen/wKwmgm。

编辑：

编辑CodePen：http://codepen.io/anon/pen/wKwmgm。我相信这就是你想要实现的目标！

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2">
        <div class="linkblok hidden-xs col-md-3 col-sm-6">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div>
        <div class="img-responsive col-md-3 col-sm-6">
          <a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a>
        </div>
        <div class="linkblok hidden-xs col-md-3 col-sm-6">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div> 
        <div class="img-responsive col-md-3 col-sm-6">
          <a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a>
        </div>
      </div>
    </div>
</div>

Answer 2

使用显示块，然后根据需要定义块的宽度。

.linksblok div {
    margin:20px;
    display:block;   
    width:150px;
}

看看你是否需要它。

Answer 3

height:200px;width:50px;

请查看我在jsfiddle demo

上分享的演示

Answer 4

由于您使用的是bootstrap，因此可以通过在行类中包含彼此属于的div来修复此问题，然后添加一些跨度以对齐它们。像：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="text-center linksblok">
                <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>
            </div>
        </div><br/>

        <div class="row">
            <div class="linkblok hidden-xs col-xs-offset-5 col-sm-5"><a href="http://www.sfg.nl">Bekijk de site van &gt;</a></div>
            <div class="img-responsive col-xs-4 col-xs-offset-2"><a href="http://www.sfg.nl"><img src="http://placehold.it/300x100" alt="logo sfg"/></a></div>
        </div><br/>
        <div class="row">
            <div class="linkblok hidden-xs col-xs-offset-5 col-xs-5"><a href="http://www.sfg.nl">Bekijk de site van &gt;</a></div> 
            <div class="img-responsive col-xs-4 col-xs-offset-2"><a href="https://www.vlietlandziekenhuis.nl/"><img src="http://placehold.it/200x100" alt="logo vlietland"/></a></div>
        </div>

    </div>
</div>

您当然可以使用列的大小，但我认为这有助于您调整内容。

<强> JSFiddle

Answer 5

尝试按以下步骤操作：

<div class="text-center linksblok"> <p> <strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong> </p> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="linkblok hidden-xs right" > <a href="http://www.sfg.nl">Bekijk de site van ></a> </div> <div class="img-responsive"> <a href="http://www.sfg.nl"> <img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="linkblok hidden-xs" > <a href="https://www.vlietlandziekenhuis.nl/">Bekijk de site van ></a> </div> <div class="img-responsive"> <a href="https://www.vlietlandziekenhuis.nl/"> <img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/> </a> </div> </div> </div> </div>

在css中添加它 -

.right { text-align: right; }

希望这有帮助！

-

更新 -

点击此处Sample jsFiddle。

Answer 6

您实际上可以在不使用css Bootstrap的情况下实现此目的，您可以阅读bootstrap grid system。您应该开始掌握这种方法，因为它在css中创建响应式布局时非常强大。

您可以看到我创建的JSFIDDLE SAMPLE。只需使用值和1 -> 2 3 5 1 2 -> 3 4 5 6 10 1 2 3 -> 4 5 6 6 9 10 15 1 2 3 4 -> 5 6 6 8 9 10 12 15 20 1 2 3 4 5 -> 6 6 8 9 10 10 12 15 15 20 25 1 2 3 4 5 6 -> 6 8 9 10 10 12 12 15 15 18 20 25 30 1 2 3 4 5 6 -> 8 9 10 10 12 12 15 15 18 20 25 30 1 2 3 4 5 6 8 -> 9 10 10 12 12 15 15 16 18 20 24 25 30 40。希望能帮助到你。欢呼声。

Boostrap，用图像互相划分

6 个答案: