将三个元素对齐

Question

我想将图片放在左边，文本放在中间，其他文字放在右边。

这是我的HTML：

<div class="author">

    <img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' />

    <p>Center</p>

    <p class="date">Right</p>

</div>

演示：http://jsfiddle.net/yx5z1rr6/

Answer 1

请参阅此fiddle

<强> HTML

<div class="author">
    <div class="sample">
        <img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' />
    </div>
    <div class="sample">
        <p>Center</p>
    </div>
    <div class="sample">
        <p class="date">Right</p>
    </div>
</div>

<强> CSS

.author {
    float:left;
    width:600px;
    background:red;
}
.sample{
    width:33%;
    float:left;
}

我在小提琴中所做的是，我将每个元素，即<p>和<img>封装在<div>中，并使用类sample，然后在.sample的CSS我将它们向左移动并给出了33％的宽度。

Answer 2

以这种方式使用float：

＆＃13;

＆＃13;

.author {
  width: 600px;
  background: red;
  overflow: hidden;
}

.author img, .author p {
  float: left;
}

.author p.date {
  float: right;
}

＆＃13;

<div class="author">
  <img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' />
  <p>Center</p>
  <p class="date">Right</p>
</div>

＆＃13;

＆＃13;

＆＃13;

小提琴：http://jsfiddle.net/yx5z1rr6/5/

此解决方案不使用flexbox ，因此它也适用于IE。或者如果中心是一个完美的中心，请使用：

＆＃13;

＆＃13;

.author {
  width: 600px;
  background: red;
  overflow: hidden;
}

.author img {
  float: left;
}

.author p {
  text-align: center;
}

.author p.date {
  float: right;
  text-align: right;
}

＆＃13;

<div class="author">
  <img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' />
  <p class="date">Right</p>
  <p>Center</p>
</div>

＆＃13;

＆＃13;

＆＃13;

小提琴：http://jsfiddle.net/yx5z1rr6/5/

Answer 3

我非常喜欢flexbox设计！

简单快速地查看此代码，我只是添加了一些行

＆＃13;

＆＃13;

.author {
    width:600px;
    background:red;
    width: 600px;
    background: red;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
}

＆＃13;

<div class="author">
    
    <img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' />
    
    <p>Center</p>

    <p class="date">Right</p>

</div>

＆＃13;

＆＃13;

＆＃13;

如果您想了解有关Flex设计的更多信息，请参阅此link（测试用）和this in csstricks（用于学习）

Answer 4

使用内联块。 fiddle

.author {
    width:600px;
    background:red;
   margin:0!important;
    padding:0!important;
}
img, p{display:inline-block;}

img{width:70px; padding-left:5px;padding-top:15px;}
p{width:225px; text-align:center;}

<div class="author">
    
    <img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' />
    
    <p>Center</p>

    <p class="date">Right</p>

</div>

Answer 5

我的方法是：http://jsfiddle.net/shannabarnard/yx5z1rr6/8/

HTML

interface1

CSS

<div class="boxes"> 
   <div class="one box"><img src='http://www.lua.org/images/lua-logo.gif' height='70' width='70' /></div> 
   <div class="two box">Center</div> 
   <div class="three box date">Right</div>  
</div>

Answer 6

<div style="width:100%; height:20%;">
    <div style="background-color:red;">
        <img src="http://www.lua.org/images/lua-logo.gif" width="128" height="128" alt="Image" style="float:left;"/>
        <div style="float:left; margin-left:40%;">
            <p>Center Text</p>
        </div>
        <div style="float:right;">
            <p>Right Text</p>
        </div>
    </div>
</div>