html - div 中的图像

Question

我无法在 div 中对齐图像。 我想将其右对齐。

将图像 float 到右侧后，我得到了这个:

<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 之外，因为您没有清除 float 。有多种方法可以做到这一点。我建议将 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 */
}