Question

我有一个名为row3red3的div容器我有2个div，左（.row3red3slika）和右（.row3red3info）。

我无法将div .row3red3info设置在图片后面的内嵌位置。

我试过并设置.row3red3slika的宽度但没有工作，我有问题我认为有row3red3slika宽度。？

HTML

<div class="row3red3">
    <div class"row3red3slika">

        <img src="img/slika2.jpg" alt="Slika2" height="150px" width="215px">

        <div class="imgtext1">
            <span><i class="fa fa-university"></i></span>
        </div><div class="imgtext2">
            <span>PORTSAID EGYPT</span>
        </div>

    </div>

    <div class="row3red3info">

        <span>text</span>
    </div>
</div>

CSS

.row3red3{
    width:900px;
    padding-left: 15px;
    padding-top: 15px;
}

.row3red3slika{
    width:215px;
    height:150px;
}

.row3red3 .imgtext1{
    display:inline-block;
    position: relative;
background-color:#3E6373;
color:white;
margin-top: 95px;
margin-left:10px;
padding: 4px;
}


.row3red3 .imgtext2{
    display:inline-block;
    position: relative;
font-size: 14px;
background-color:#3E6373;
color:white;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 60px;
padding: 4px;
}


.row3red3 img{
position: absolute;
    display:inline-block;
    vertical-align: top;    
}

.row3red3info{


font-size:20px;
}

Answer 1

添加float: left;到.row3red3，.imgtext1和.row3red3info以及.row3red3 img。你错过了= in：

<div class"row3red3slika">

它应该是：

<div class="row3red3slika">

Answer 2

你试过漂浮你的内心div？

.row3red3info {float:right;}
.row3red3slika{float:left;}

可能有助于为此设置一个jsfiddle。

Answer 3

您可以使用float:left。如果你想摆脱编码，你可以使用Bootstrap。它确实有一个完全可定制的完美网格系统这里有一个链接到它的网格系统教程http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

为什么我无法正确对齐两个div

3 个答案: