div内的图像

Question

我无法在div中对齐图像。 我想将它与右边对齐。

将图像浮动设置为右后，我得到：

<img src="Images/Products/47_dolcimo-max-001.jpg" width="263" height="155" style="float:right;">

它看起来像是div，它不是。

如果我将float设置为none，那就是什么都没有，我把它放在div里面和右边。至少可以看到。

<img src="Images/Products/47_dolcimo-max-001.jpg" width="263" height="155" style="float:none;">

来自div的

CSS：

.headerphoto {
    z-index: 0;
    position: relative;
    margin: 0 auto;
    width: 760px;
    height: 100%;
    border-width:1px;       
    border-color:#EFEDED;
    border-right-style: solid;
    border-left-style:solid;
    border-top-style:solid;
    border-bottom-style:solid;
    margin-top:20px;
}

来自div的

HTML：

<div class="headerphoto">

    <img src="Images/Products/practidose.fw.png" width="760" height="65" > 
    <img src="Images/Products/47_dolcimo-max-001.jpg" width="263" height="155" style="float:none;"> 

    </div>

Answer 1

图像显示在div之外，因为您没有清除浮动。有很多方法可以做到这一点。我建议将overflow: hidden添加到您的父div

.headerphoto {
    z-index: 0;
    position: relative;
    margin: 0 auto;
    width: 760px;
    height: 100%;
    border-width:1px;       
    border-color:#EFEDED;
    border-right-style: solid;
    border-left-style:solid;
    border-top-style:solid;
    border-bottom-style:solid;
    margin-top:20px;
    overflow: hidden; /* ADDED THIS */
}

Answer 2

你可以把它变成背景图片..

<div style="background-image:url(path/to/img.png);background-position: center right; background-repeat:no-repeat;">
</div>

设置你的（min-）？ div的高度与图像的高度。

Answer 3

当您float元素时，它将从文档流中取出。这意味着父div没有看到它，这就是为什么你的图像在div之外的样子。你需要做的是清除浮子。

更多信息： http://css-tricks.com/the-how-and-why-of-clearing-floats/

浮动元素后：     .clear {clear：both; display：block; overflow：hidden; visibility：hidden; width：0; height：0; }     

或者在浮动元素上添加clearfix类：

.clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Answer 4

你不需要在这样的情况下使用浮动，但是如果你想使用浮动并将其保持在包含的div中，那么你必须将底部图像设置为向右浮动，然后只需为你的带有CSS的容器，从第一个图像顶部到第二个图像底部的高度。

Answer 5

img标签有display：inline;默认值。只需添加另一个标记并添加text-align：right;

<div class="img_wrapper">
<img src="path_to_img" />
</div>

<style>.img_wrapper {
    text-align:right;
}
</style>