Question

我无法弄清楚这段代码。

我围绕左侧的主导航制作了包装，并在右侧包含照片和文字。我在文本/照片容器中有两个“盒子”。这是代码：

/* Wrapper for Text and Photo on Home Page */

.wrapper_text_photo{ 
        display:block;
        float: left;
        background: rgba(0,0,255, .8);
        width:800px;
        height: 700px;
        padding: 20px;
        margin-top:20px;
        margin-left:10px;
}

/* Photo on Home Page */

.photo_home {
        float: left;
        margin-right:10px;
}

/* Text on Home Page */

.home_text{ 
        display:block;
        background: rgba(255,255,255,.75);
        width:800px;
        height: 400px;
}

这是html：

<div class="wrapper_text_photo">

<!-- Picture of Me __________________________________________-->

    <img class="photo_home" src="images/Home/claire-ed.jpg" alt="claire isabel webb" height="200px">

<!-- Text ___________________________________________________-->

    <div class="home_text">
            <p>I graduated in 2010 from Vassar College with departmental honors in astronomy. I also minored in philosophy and discovered a late interest in architecture and art history. ETC
            <br><br>
            Email me at claire.isabel.webb@gmail.com.
            <br> 
            </p>
    </div>
</div>

我希望文本框与图像对齐，但无论我使用填充和边距多少，我似乎无法正确使用它。

谢谢！

Answer 1

该段落的隐含边距正在推动home_text。删除其边距：

.home_text p {
    margin: 0;
}

Answer 2

添加：

p {
margin: 0;
}

您的“文本框”有19px的上/下边距。添加margin: 0;会将上/右/下/左值设置为0.

Answer 3

如果我理解你想要的东西，处理它的一种方法是将图像移动到包含文本的div中：

<div class="wrapper_text_photo">
  <div class="home_text">
    <img class="photo_home" src="images/Home/claire-ed.jpg" alt="claire isabel webb" height="200px">
    <p>I graduated in 2010 from Vassar College with departmental honors in astronomy. I also minored in philosophy and discovered a late interest in architecture and art history. ETC
    ...
  </div>
</div>

这可能会使wrapper_text_photo和home_text div中的一个或另一个变得多余。

Answer 4

在我看来，您的图片应该嵌套在<p>标记内，但是，这是一个快速解决方法。

.photo_home {
    float: left;
    margin-right: 10px;
    margin-top: 19px;
}

Answer 5

尝试这可能有帮助

HTML

<div class="wrapper_text_photo">
    <div class="home_text">
            <p><img class="photo_home" src="images/Home/claire-ed.jpg" alt="claire isabel webb" height="200px" />I graduated in 2010 from Vassar College with departmental honors in astronomy. I also minored in philosophy and discovered a late interest in architecture and art history. ETC
            <br><br>
            Email me at claire.isabel.webb@gmail.com.
            <br> 
            </p>
    </div>
</div>

CSS

.home_text p img {
    float:left;
}

工作demo

为什么我的文本框有奇怪的填充？

5 个答案: