Question

嘿，初学者编码器在这里：

我正在努力实现这个目标：http://i.imgur.com/aVawhET.png：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 5</title>
<style>
    body{
        margin-top: 25px;
        margin-left: 15px;
        width: 100%;
        height: 100%;
    }
    #text{
        width: 90%;
        display: inline-block;
    }
    #text p{
        word-break: break-all;
    }
    #image{

        height: 500px;
        width: 5%;
        display: inline-block;
        background-image: url("bakgrund.jpg");
        background-repeat: repeat-y;
    }
</style>

<div id="container">
    <div id="text">
        <p>
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
        </p>
        <p>
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
        </p>
        <p>
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
            TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
        </p>
    </div>
    <div id="image">

    </div>
</div>

但是我失败并得到了这个结果：http://imgur.com/ac0nSqz我做错了什么？我尝试过添加减去边距值的事情。它为什么会跳下来？

Answer 1

<强> CSS

body{
    margin-top: 25px; ///Remove this
}

在正文标记中添加margin-top: 0

Answer 2

正确答案是：

#text,
#image { vertical-align: top; }

原因是因为inline-block元素默认情况下是由它们的基线对齐的 - 所以两个div的底部彼此对齐 - 这意味着它们将是较短div顶部的空格当它与较高的div一致时，使这些div的底部对齐。

Div元素跳下来

2 个答案: