Question

CSS

.container{
   height: 250px;
   padding 10px 0;
}
.col-left{
   display: inline-block;
   background-image:url("support.png");
   height:235px; 
   width:300px;
}

.col-right{
   display: inline-block;
   width:600px;
}

HTML

<div class="container">
    <div class="col-left"></div>
    <div class="col-right">
       <h1>this is my title</h1>
       <p>to reach their Potential</p>
    </div>
</div>

问题：

我想要左侧的img和右侧的文本

显示在同一行。
垂直排列（文字出现在img的中间位置）我怎么能这样做？

Answer 1

据我了解你的问题，我发现Float会解决你的问题。 Float与inline-block的作用相同。您可以通过此网址http://www.vanseodesign.com/css/inline-blocks/

了解有关此内容的更多信息

所以，就我的知识音乐会而言，我会寻求以下解决方案，希望这会对你有帮助。

CSS：

.container {width:100%;height: 250px;padding 10px 0;}
.col-left {float:left;background-image:url("support.png");height:235px; width:30%;}
.co-right {float:left;width:70%}

JSFiddle：http://jsfiddle.net/ugQCU/

Answer 2

以下是您想要实现的代码试试这个我刚刚添加了一个用于显示垂直对齐的div使用这个让我知道 Html代码

<div class="container">
   <div class="col-left"></div>
    <div class="col-right">
        <div class="col-right-wrap">
            <h1>this is my title</h1>
            <p>to reach their Potential</p>
        </div>
   </div>
</div>

和css

.container{
    height: 250px;
    padding 10px 0;
}
.col-left { 
    float:left; /*give a direction where you want */
    display: inline-block;
    background-image:url("images/support.png");
    height:235px; 
    width:300px; 
}
.col-right {
    float:left; /*give a direction where you want */
    display: inline-block;
    width:600px;
}
/* align however you want adjust this below code according to you */
.col-right-wrap{
    display:table-cell; 
    vertical-align:middle;
}

Answer 3

我想这就是你想要的。 Live Demo

.container {
    height: 250px;
    padding 10px 0;
}
.col-left {
    display: inline-block;
    background-image:url("http://www.lois-systems.co.uk/wp-content/uploads/2012/08/support.png");
    height:235px;
    width:300px;
    vertical-align:middle;
}
.col-right {
    display: inline-block;
    width:600px;
    vertical-align:middle;
}
.col-right h1, .col-right p {
    margin:0;
}

Answer 4

HTML代码与CSS相同：

.container {
    position: relative;
    height: 235px;
    padding 10px 0;
}
.col-left {
    position: absolute;
    background: #AAA;
    height:235px;
    width:300px;
}
.col-right {
    display: table-cell;
    vertical-align: middle;
    height: 235px;
    padding-left: 310px;
}

演示： http://jsfiddle.net/zWNCP/2/

Answer 5

我认为这样的事情应该是你想要的：

<强> HTML：

<div class="container">
    <div class="col-left">
        <img src="http://placehold.it/300x235" />
    </div>
    <div class="col-right">
         <h1>this is my title</h1>

        <p>to reach their Potential</p>
    </div>
</div>

<强> CSS：

.container {
    width:100%;
    height: 250px;
    padding 10px 0;
}
.col-left {
    float:left;
    background-image:url("support.png");
    height:235px;
    width:300px;
}
.col-right {
    float:left;
    width: 600px;
    padding-top: 50px;
}

LIVE DEMO

请注意，对于文本的放置，我使用了填充，这可能不是理想的解决方案。

如何使左侧的图像和右侧的文本垂直对齐

5 个答案: