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

Question

我又遇到了一些 css/html 的问题，我想要文本，然后是旁边的两个图像，第一个（最外面的）div 是页面的宽度，因为它只是用作“背景色条”然后在这个 div 中，我想要另一个 div 950px X 250px 和 div 480px x 250px 中的右侧图像（我已经管理过）但是当我添加文本时，它会将它们向下推。

我需要文本在左边，图像在右边（只有两个单独的 div）包含在内容 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

试试这个，

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

希望这会有所帮助。

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 被水平分隔为 2 个边，高度与您要求的相同。

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

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 3

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