-1

我无法弄清楚这段代码。

这是我的网站：http ://claireisabelwebb.com/

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

/* 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>

我希望文本框与图像对齐，但无论我如何使用填充和边距，我似乎都无法正确处理。

谢谢你 ！

4

4 回答 4

2

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

.home_text p {
    margin: 0;
}
于 2013-03-14T01:32:35.537 回答
1

添加：

p {
margin: 0;
}

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

于 2013-03-14T01:35:02.527 回答
0

如果我了解您想要什么，处理它的一种方法是将您的图像移动到包含您的文本的 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_photoand home_textdiv 中的一个或另一个变得多余。

于 2013-03-14T01:42:48.767 回答
-1

试试这个也许有帮助

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;
}

工作演示

于 2013-03-14T01:36:35.040 回答