Question

我想将我的六个div对象（基本为盒子）对齐成三行。（图片我绘制以演示＆gt; enter image description here

我真的很无知我应该如何对齐我的盒子，以便它们能够进入这些行。现在，它只是一条很长的水平线。

我会在这里发布我的代码：）

HTML：

<div class="boxbox">
  <div id="newsb">
    <img class="bottom" src="news/newsbutton.png" />
    <img class="topi" src="news/news2.png" />
  </div>
  <div id="billetb">
    <img class="bottom" src="news/billetbutton.png" />
    <img class="topi" src="news/billetbutton2.png" />
  </div>
  <div id="infob">
    <img class="bottom" src="news/infobutton.png" />
    <img src="news/infobutton2.png" width="250" height="150" class="topi" /> 
  </div>
  <div id="kontak">
    <img class="bottom" src="news/kontakt.png" />
    <img class="topi" src="news/kontakt2.png" /> 
  </div>
  <div id="log">
    <img class="bottom" src="news/loginbutton.png" />
    <img class="topi" src="news/login2.png" />  
  </div>
  <div id="cf4a">
    <img class="bottomi" src="news/sponsor/KS.png" />
    <img class="topi" src="news/sponsor/SS.png" />
    <img class="bottomi" src="news/sponsor/ES.png" />
    <img class="topi" src="news/sponsor/CM.png" />  
  </div>
</div>

CSS：这基本上只是悬停在动画上，这将是很长时间在这里发布的方式。如果你需要我的CSS，请写。

任何帮助将不胜感激！

Answer 1

根据图片，这里是代码：

<强> Live demo

<强> HTML

<div class="boxbox">

    <div class="row">
        <div id="newsb">
            <img class="bottom" src="news/newsbutton.png" />
            <img class="topi" src="news/news2.png" />
        </div>

        <div id="billetb">
            <img class="bottom" src="news/billetbutton.png" />
            <img class="topi" src="news/billetbutton2.png" />
        </div>

        <div id="infob">
            <img class="bottom" src="news/infobutton.png" />
            <img src="news/infobutton2.png" width="250" height="150" class="topi" />
        </div>
    </div>
    <div class="row">
        <div id="kontak">
            <img class="bottom" src="news/kontakt.png" />
            <img class="topi" src="news/kontakt2.png" />
        </div>

        <div id="log">
            <img class="bottom" src="news/loginbutton.png" />
            <img class="topi" src="news/login2.png" />
        </div>

        <div id="cf4a">
            <img class="bottomi" src="news/sponsor/KS.png" />
            <img class="topi" src="news/sponsor/SS.png" />
            <img class="bottomi" src="news/sponsor/ES.png" />
            <img class="topi" src="news/sponsor/CM.png" />
        </div>
     </div>
</div>

<强> CSS

.row{
    display:block;
}

.row div{
    display:inline;
}

Answer 2

你可以在这里看到：

HTML：

<div class="boxbox">
<div id="newsb">
    <img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
    <img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="billetb">
    <img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
    <img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="infob">
    <img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
    <img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="kontak">
    <img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
    <img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="log">
    <img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
    <img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="cf4a">
    <img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
    <img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>

CSS：

.boxbox {
    height:200px;
    margin:10px;
}

.boxbox > div {
    width:32%;
    height:100px;
    background-color:Black;
    display:inline-block;
    margin:1px;
}

* {
    margin:0;
    padding:0;
}

.left {
    float:left;
}

.right {
    float:right;
}

img {
    margin-top: 12px;
}

你可以在这里看到：http://jsfiddle.net/78UEX/1/

希望这有帮助!!!

Answer 3

试试这个demo ..

您可以让每个div取代它自己的位置，如果水平行没有其他div的位置，它将转到第一行下的另一行..

<style>
    .boxbox{
        position: relative;
    }
    .box{
        float: left;
        width: 33.3%;
    }
</style>
<div class="boxbox">

    <div id="newsb" class="box">
        <img class="bottom" src="news/newsbutton.png" />
        <img class="topi" src="news/news2.png" />
    </div>

    <div id="billetb" class="box">
        <img class="bottom" src="news/billetbutton.png" />
        <img class="topi" src="news/billetbutton2.png" />
    </div>

    <div id="infob" class="box">
        <img class="bottom" src="news/infobutton.png" />
        <img src="news/infobutton2.png" />
    </div>

    <div id="kontak" class="box">
        <img class="bottom" src="news/kontakt.png" />
        <img class="topi" src="news/kontakt2.png" />
    </div>

    <div id="log" class="box">
        <img class="bottom" src="news/loginbutton.png" />
        <img class="topi" src="news/login2.png" />
    </div>

    <div id="cf4a" class="box">
        <img class="bottomi" src="news/sponsor/KS.png" />
        <img class="topi" src="news/sponsor/SS.png" />
        <img class="bottomi" src="news/sponsor/ES.png" />
        <img class="topi" src="news/sponsor/CM.png" />
    </div>
</div>

另一种方式

demo

或者您可以设置三个垂直行，并在每行中放置两个div ..

<style>
    .boxbox{
        position: relative;
        overflow: hidden;
    }
    .row{
        float: left;
        width: 33.3%;
    }
</style>
<div class="boxbox">
    <div class="row">
        <div id="newsb">
            <img class="bottom" src="news/newsbutton.png" />
            <img class="topi" src="news/news2.png" />
        </div>

        <div id="billetb">
            <img class="bottom" src="news/billetbutton.png" />
            <img class="topi" src="news/billetbutton2.png" />
        </div>
    </div>

    <div class="row">
        <div id="infob">
            <img class="bottom" src="news/infobutton.png" />
            <img src="news/infobutton2.png" />
        </div>

        <div id="kontak">
            <img class="bottom" src="news/kontakt.png" />
            <img class="topi" src="news/kontakt2.png" />
        </div>
    </div>

    <div class="row">
        <div id="log">
            <img class="bottom" src="news/loginbutton.png" />
            <img class="topi" src="news/login2.png" />
        </div>

        <div id="cf4a">
            <img class="bottomi" src="news/sponsor/KS.png" />
            <img class="topi" src="news/sponsor/SS.png" />
            <img class="bottomi" src="news/sponsor/ES.png" />
            <img class="topi" src="news/sponsor/CM.png" />
        </div>
    </div>
</div>

Answer 4

根据你的照片，你想要2排3列。行向左/向右，列向上/向下。

有很多不同的方法可以做到这一点。

以下是一个例子：http://jsfiddle.net/qB55N/

<div class='row'>
    <div class='col'>1</div>
    <div class='col'>2</div>
    <div class='col'>3</div>
</div>
<div class='row'>
    <div class='col'>4</div>
    <div class='col'>5</div>
    <div class='col'>6</div>
</div>

Answer 5

这是你在说什么？示例：http://jsfiddle.net/xsZ54/

<强> HTML

<div class="row">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
<div class="row">
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

<强> CSS：

.row{
    display: table;
    width: 100%;
}

.box{
    display: table-cell;
}

如何在行中对齐div对象

5 个答案:

另一种方式