Question

我试图在图像周围的div中浮动一些文本，图像本身包含在浮动的div中。包含div使用负边距和填充来向下推#book3。这似乎会影响#content-body-text中的图像，将其向下移动。

如何让图片位于#content-body-text的顶部，让文字环绕图片并且仍然在底部对齐#book3。

为什么图像元素会以这种方式运行？看起来文本的行为符合预期，关于#content-body-text和#content-body-container的负边距和填充，但图像表现不同。

如果有人采用不使用负边距的方法，我也应该听到这一点。

小提琴是here

<style>
html {
    margin: 0;
    font-size: 12pt;
    font-family: Georgia, Serif;
}

body {
    background-color: #ffb83d;
    margin: 0;
}
h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.5em;
}

.float-left {
    float:left;
}

.float-right {
    float:right;
}

.hidden {
    display: none;
}

#content {
    width: 960px;
    height: 600px;
    margin: 0 5px 0 5px;
}

#content-body-container {
    position: relative; 
    float: left;
    top: 28px;
    width: 495px;
    height: 345px;
    padding-top: 117px; /* height of content-body-container - book3 (462-345) - however we subtract out 117 from 462 because of the padding*/
}

#content-body-text {
    margin-top: -117px; /* dead space above book 3 so we can shift up*/
    font-size: 1.1em;

    /* Set padding to keep content from hitting the edges */
    padding-left: 15px;
    padding-right: 15px;
    height: 462px; 
}

/* books and book links */
div.book {
    position: relative;
    float: left;
    bottom: 0;
}

a.navlink {
    -ms-filter: "alpha(opacity=60)";
    filter: alpha(opacity=60);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
    opacity:.60; 
}

a.navlink:hover {
    -ms-filter: "alpha(opacity=100)";
    filter: alpha(opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1.0);
    opacity:1.0; 
}

a.book {
    position: absolute;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    color: black;
}

#book1 {
    font-size: 1.3em;
    top: 61px;
    height: 429px;
    width: 79px;
    margin-right: 16px;
    background-color: #ffd48b;
}

#book2 {
    top: 28px;
    height: 462px;
    width: 28px;
    margin-right: 12px;
    background-color: #ffc664;
}

#book3 {
    font-size: .85em;
    height: 345px;
    width: 88px;
    background-color: #ffe3b1;
    margin-right: 10px;
}

#book4 {
    font-size: 3.0em;
    top: 40px;
    width: 227px;
    height: 450px;
    background-color: Transparent;

    /*/content/images/diag-book.gif*/
    background-image: url('data:image/gif;base64,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');
    background-repeat: no-repeat;
    background-position: bottom;
}

#book5{
    width: 93px;
    height: 525px;
    background-color: #ffe3b1;
    margin-top: -35px;
}

a#contact {
    bottom: 54px;
}

a#testimonials {
    bottom: 16px;
}

a#bio {
    margin-left: -65px;
    bottom: 20px;
    -webkit-transform: rotate(20deg); /* Chrome & Safari */
    -moz-transform: rotate(20deg);    /* Firefox */
    -ms-transform: rotate(20deg);     /* IE 9+ */
    -o-transform: rotate(20deg);      /* Opera */
    transform: rotate(20deg);         /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=-0.34202014, M21=0.34202014, M22=0.93969262, sizingMethod='auto expand'); /* IE 7-8 */
}
</style>

<div id="content-body">

    <div id="book1" class="book">
        <a href="#" id="contact" class="book navlink">Contact</a>
    </div>

    <div id="book2" class="book"></div>

    <div id="content-body-container">
        <div id="book3" class="book">
            <a href="#" id="testimonials" class="book navlink">Testimonials</a>
        </div>
        <div id="content-body-text">

            <h2>Lorem Ipsum</h2>

            <div style="margin-left:80px;">
                <img id="shifted-down" src="http://ecx.images-amazon.com/images/I/41gFs8gGmeL.jpg" width="75" height="100" alt="Image" style="padding-right: 10px; text-align:left; margin-top: -50px; float:left;" />
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tincidunt turpis. Nulla ultricies suscipit mauris, et viverra lorem vestibulum ac. Sed posuere augue sit amet porttitor condimentum. Nulla eu dolor in purus ullamcorper porta ut suscipit risus.  
                </p>
        </div>
    </div>

    <div id="book4" class="book">
            <a href="#" id="bio" class="bio navlink">Testimonials</a>
    </div>
    <div id="book5" class="book"></div>
</div>

Answer 1

问题在于您的负边距（您应该将代码粘贴到问题中）。请参阅小提琴：http://jsfiddle.net/gjmkaoph/

以下是我分别对元素的填充和边距进行了更改的内容：

#content-body-container {
    position: relative; 
    float: left;
    top: 28px;
    width: 495px;
    height: 345px;
    padding-top: 60px; /* <-- Modified. height of content-body-container - book3 (462-345) - however we subtract out 117 from 462 because of the padding*/
}

#content-body-text {
    margin-top: -60px; /* <-- Modified. dead space above book 3 so we can shift up*/
    font-size: 1.1em;

    /* Set padding to keep content from hitting the edges */
    padding-left: 15px;
    padding-right: 15px;
    height: 462px; 
}

您可以自己微调对齐，但如果您不想要这样的问题，则负边距不是“推荐”的做事方式。

在带有负边距的嵌套浮动div中围绕图像浮动文本

1 个答案: