html - 尝试在填充框中添加 float 图像和描述

Question

我正在努力让这一切发生。 what I want

到目前为止，我不知道如何将一个 img-div 与另一个 text-div 重叠并在 text-div 的顶部保留空白。你会看见。我现在拥有的是:

<div id="some">
    <img src="photos/some.png">
    <div id="box">
        <p>Proudly seeking</p>
        <h2>some Cofefe</h2>
        <button id="shopNow" class="button">Shop</button>
    </div>
</div>

使用一些 CSS 并不能使它非常吸引人:what it looks like

#some{
    margin-top: 20px;
    background-color: red;
}
#some img{

    width: 30%;
    float: left;
}
#box{
    padding-top: 220px;
    margin-right: 40px;
    font-family: "Eusthalia";
    text-align: right;
}
#box p{
 margin-right: 32%   
}
h2 {
    font-size: 2.6em;
}
button {
    border: none;
    font-family: "Eusthalia";
    font-size: 15px;
    background-color: #300c06;
    color: #eadfc0;
    padding: 2px 10px;

}

我想知道我对 div 的整个方法是否错误。我正在研究，我发现是正确的:0；不起作用之类的东西。如何让边框重叠在图像后面？我如何给它一个宽度和一个高度，但让它向右推？

我是否必须将主 div 的宽度设置为 100%，然后将 img 的宽度设置为 30%，将文本框的彩色填充设置为 70%？但是我怎么会有 img 后面的盒子？

Answer 1

Drearo，我认为您在使用 div 标签方面做得很好。你可能需要更多的人来帮助事情顺利进行。

我建议将 div 设置为 position: absolute 以及其中一个中的图像。文本框也需要它。除此之外，一点 CSS 就能让你得到你想要的定位。看这里:

<div id="some">
   <div class="my_img">
   <img src="photos/some.jpg" />
</div>
        <div id="box">
            <p>Proudly seeking</p>
            <h2>some Cofefe</h2>
            <button id="shopNow" class="button">Shop</button>
        </div>
</div>

CSS:

#some{
    margin-top: 20px;
    height: 100vh;
    width: 100vw;
    border: 1px solid #000;
    position: relative;
}
.my_img {
  position: absolute;
  top: 5em;
  left: 5em;
  z-index: 200;

}
.my_img img {
  width: 200px;
}
#box{
    position: absolute;
    top: 10em;
    left: 10em;
    transition: translate( -50%, -50%);
    font-family: "Eusthalia";
    text-align: right;
    background: red;
    min-width: 60%;
    padding-right: 2em;
}
#box p{
 margin-right: 32%   
}
h2 {
    font-size: 2.6em;
}
button {
    border: none;
    font-family: "Eusthalia";
    font-size: 15px;
    background-color: #300c06;
    color: #eadfc0;
    padding: 2px 10px;

}

https://jsfiddle.net/5k94j73p/