Question

我刚开始编写自己的网站并遇到了一些问题。我已经做了一个＆＃39;页面＆＃39;宽度为960像素的div，并希望并排包含2个部分，但是当我尝试时，它们会出现在＆＃39;页面下面。 DIV。如何在页面中显示它们？

＆＃13;

#page { 
    max-width: 960px;
    min-width: 720px;
    margin: 10px auto 10px auto;
    background-color: #b7fd9b;
    border: 15px solid rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    -moz-background-clip: padding;  
    -webkit-background-clip: padding;  
    background-clip: padding-box; 
 }
  
 #sectionleft {
    float: left;
    width: 620px;
    padding: 10px 10px 10px 10px;
}

#sectionright {
    font-family: 'Niconne', cursive;
    font-size: 40px;
    float: right;
    width: 300px;
    padding: 10px 10px 10px 10px;
}

＆＃13;

<!doctype html>
<html>
    
<head>
<title>Very Vegetarian</title>
<link href="Style.css" type="text/css" rel="stylesheet">
</head>

<body>
    
<div id="page">

    <h1>Welcome!</h1>

    <div id="sectionleft">
        <p>This website is for teenagers that have thought about the idea of vegetarianism and want to learn more about it. It includes easy vegetarian recipes that are very simple to make yet really tasty to eat, with ingredients that can be found in any common kitchen cupboard. There is a page with some information about what vegetarianism really is and the benefits of becoming a vegetarian, and another page with useful links to other websites if your interest has been peaked by this website. </p>
    </div>

    <div id="sectionright">
    &ldquo;Nothing will benefit human health and increase the chances for survival of life on Earth as much as the evolution to a vegetarian diet.&rdquo; <br>
    - Albert Einstein
    </div>
  
</div>    

</body>
    
</html>

＆＃13;

Answer 1

＆＃34;页面＆＃34;元素基本上只包含h1元素，就内容而言，其余内容在左右div之下。这会导致您的文字被＆＃34;剪辑＆＃34;在主容器之外，一个简单的解决方案是为页面设置溢出值：

#page { 
    overflow:hidden;
    max-width: 960px;
    min-width: 720px;
    margin: 10px auto 10px auto;
    background-color: #b7fd9b;
    border: 15px solid rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    -moz-background-clip: padding;  
    -webkit-background-clip: padding;  
    background-clip: padding-box; 
}

将溢出设置为＆＃34;隐藏＆＃34;你强迫你的div覆盖你孩子元素的所有空间，隐藏这个＆＃34;剪辑＆＃34;，检查http://www.w3schools.com/cssref/pr_pos_overflow.asp以获取更多信息。

Div部分出现在页面div下面

1 个答案: