Question

我希望我的图像位于右侧的div中，左侧是列表项。我不知道自己做错了什么。它看起来很奇怪。 img也应包含在边界内。

HTML

<div id ="breturn">
    <h3>Returns Policy</h3>
    <img src="images/Returns-policy.jpg" alt ="Returns">
    <ul>
        <li>You have 30 days to return the item.</li>
        <li>You must pay shipping in order to recieve a refund.</li>
        <li>There are no refunds.</li>
    </ul>
</div>

CSS

#breturn
{
    border-width: 1px;
    border-style: solid;
    border-color: white;
    padding: 2px;
    border-radius: 5px;
    height: 500px;
}

#breturn ol
{
    margin-left: auto;
    margin-right: auto;
}

#breturn img
{
    width: 300px;
    height: 300px;
    float: right;
    display: block;
    margin: auto;
    float: right;
}

Answer 1

将图像放在列表后面，并将每个图像的显示设置为内联块。

＆＃13;

#breturn
{
    border-width: 1px;
    border-style: solid;
    border-color: white;
    padding: 2px;
    border-radius: 5px;
    height: 500px;
}

#breturn ul
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

#breturn img
{
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: auto;
}

＆＃13;

<div id ="breturn">
  <h3>Returns Policy</h3>
  <ul>
    <li>You have 30 days to return the item.</li>
    <li>You must pay shipping in order to recieve a refund.</li>
    <li>There are no refunds.</li>
  </ul>
  <img src="images/Returns-policy.jpg" alt ="Returns">
</div>

＆＃13;

这是一个jsfiddle

https://jsfiddle.net/43premwa/

Answer 2

#breturn {
border-width: 1px;
border-style: solid;
border-color: black;
padding: 2px;
border-radius: 5px;
height: 500px;
width: 600px;
}

只需给你的品种宽度，它就会自行解决。

如何将这个图像放入我的div中？

2 个答案: