Html 跳下的Div元素_Html_Css - Fatal编程技术网

Html 跳下的Div元素

html css

Html 跳下的Div元素,html,css,Html,Css,嘿，这里是初学者编码器：我正试图做到这一点：通过以下方式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Uppgift 5</title> <style> body{ margin-top: 25px; margin-left: 15px; width: 100%;

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

我正试图做到这一点：通过以下方式：

<!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>


礼物5
身体{
边缘顶部：25px；
左边距：15px；
宽度：100%；
身高：100%；
}
#正文{
宽度：90%；
显示：内联块；
}
#文本p{
单词break：打破一切；
}
#形象{
高度：500px；
宽度：5%；
显示：内联块；
背景图片：url（“bakgrund.jpg”）；
背景重复：重复-y；
}



文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本


文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
textextextextextextextextextextextextextextextextextextextv
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本


文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
textextextextextextextextextextextextextextextextextextextv
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本

但我失败了，结果是：我做错了什么？我尝试过添加负的保证金值。为什么会跳下来？

CSS

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

在body标签中添加

margin top:0

正确答案是：

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

原因是，默认情况下，

inline block

元素按基线对齐-因此两个div的底部彼此对齐-这意味着当它们与较高的div对齐时，它们将是较短div顶部的一个空间，以使这些div的底部对齐

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