Question

我再次遇到一些css / html的问题，我想要文本，然后是它旁边的两个图像，第一个（最外面的）div是页面的宽度，因为它只是作为“背景颜色条”工作然后在这个div中我想要另一个div 950px X 250px并且在div 400px x 250px内为右边的图像（我管理的那种）但是当我添加文本时它会将它们推下来。

我需要文本在左边，图像在右边（只有两个单独的div）包含在内容div中，它以背景div为中心。

所有div都需要相同的高度。

代码在

之下

CSS

.greybackground {
background-color: #eee;
height: 230px;
width: 1920px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;


}

.greybackgroundcontent {
height: 250px;
width: 950px;
margin-right: auto;
margin-left: auto;  


}

.greybackgroundimage {
height: 250px;
width: 480px;
margin-left: 490px;
display:inline-block;

vertical-align:middle;



}

HTML

<div class="greybackground">

<div class="greybackgroundcontent">

<div class="greybackgroundtext">

<P>KLEENZONE KLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE</P>





 <div class="greybackgroundimage"><img src="images/officezoom.jpg" />

 <img src="images/polozoom.jpg"/>


</div>

</div>

</div>

</div>





 </body>
 </html>

Answer 1

希望这有帮助。

FIDDLE

<强> CSS

.greybackground {
    background-color: #eee;
    height: 230px;
    width: 1920px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;


    }

    .greybackgroundcontent {
    height: 250px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;  


    }

    .greybackgroundimage {
    height: 250px;
    width: 480px;
    /*margin-left: 490px;*/
    display:inline-block;
    float:right;
    vertical-align:middle;
    display: inline;


    }

更新的查询：

Updated Fiddle

Css问题，现在解决了IE7以后的工作正常..查看这个更新的代码，如果您有任何疑问请告诉我。

<强> CSS

.greybackgroundimage {
    width: 480px;
    /*margin-left: 490px;*/
    height:100%;
    vertical-align:top;
    display: inline;


    }

LAST UPDATED

现在div与两个水平分开，高度与你问的相同。

只需将此代码放入浏览器，然后检查它......

<强> HTML

<div class="greybackground">
<div class="greybackgroundcontent">
<div id="greybackgroundtext">
<P>KLEENZONE KLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE
KLEENZONEKLEENZONEKLEENZONEKLEENZONEKLEENZONE</P>
</div>
<div id="greybackgroundimage"><img src="images/officezoom.jpg" />
<img src="images/polozoom.jpg"/>
</div>
</div>
</div>

<强> CSS

.greybackground {
background-color: #eee;
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
.greybackgroundcontent {
background-color: #eee;
height: 250px;
width: 950px;
margin-right: auto;
margin-left: auto;  
}
#greybackgroundtext,#greybackgroundimage {
height: 250px;
 width:50%;
float:left;
display:inline-block;
vertical-align:middle;
}

Answer 2

试试这个，

<style type="text/css">
    .greybackground {
    background-color: #eee;
    height: 230px;
    width: 1920px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;


    }

    .greybackgroundcontent {
    height: 250px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;  


    }

    .greybackgroundimage {
    height: 250px;
    width: 480px;
    /*margin-left: 490px;*/
    display:inline-block;
    float:left;
    vertical-align:middle;
    display: inline;


    }

    #txt{float:left;}

    </style>

    <div class="greybackground">

    <div class="greybackgroundcontent">

    <div id='txt'>Kleenzone can cater to cleaning of all applications and sizes.</div>

    <div class="greybackgroundimage">

        <img src="images/officezoom.jpg" />

        <img src="images/polozoom.jpg"/>

    </div>

    </div>

Answer 3

您可以使用表格格式并排显示文本和图像。将css应用于tr元素而不是div元素。

图像旁边的文本框和另一个图像

3 个答案: