Question

看一下我的代码，然后告诉我们为什么不能解决问题。蓝线应位于页面底部。虽然我使用了清晰的div，但身体看起来确实很小。如果您发现出了什么问题，请解释一下解决方案。我是编码新手，所以解释对我来说真的很有用。提前谢谢你。

＆＃13;

    @charset "utf-8";
    /* CSS Document */
    .clear {
    	clear:both;
    }
    
    .wrapper {
    	width:80%;
    	margin: 0 auto;
    }
    
    header {
    	margin-top:40px;
    	border-bottom:1px solid black;
    	padding-bottom:10px;
    }
    
    header img {
    	float:left;
    	width: 250px;
    }
    
    #socialmedia {
    	float:right;
    	padding:0;
    	margin-top:-2px;
    }
    
    #socialmedia li {
    	float:left;
    	list-style-type:none;
    	padding-left:10px;
    }
    
    li img {
    	width:40px;
    }
    
    #listmenu {
    	float:left;
    	margin-top:80px;
    	margin-right:5px;
    }
    
    #listmenu li {
    	display: block;
    	margin-bottom:40px;
    	font-family:Arial;
    	Font-size: 30px;
    	border-right:1px solid black;
    }
    
    #leftmenu li:first-child {
    	color:#3598db;
    }
    
    #right {
    	float:right;
    	width:60%;
    }
    
    #signupline {
    	background-color:#3598db;
    	height:50px;
    	width:auto;
    }
    
    button {
    	float:left;
    }

＆＃13;

    <!doctype html>
    <html>
      <head>
       <meta charset="utf-8">
       <title>Untitled Document</title>
       <link rel="stylesheet" type="text/css" href="stylesheet.css" />
      </head>
    
      <body>
       <header>
        <div class="wrapper">
         <img src="logo.png" alt="logo"/>
         <ul id="socialmedia">
          <li><a href="http://www.facebook.com"><img src="facebook.png" alt="facebook" /></a></li>
          <li><a href="http://www.twitter.com"><img src="twitter.png" alt="twitter" /></a></li>
          <li><a href="http://www.youtube.com"><img src="youtube.png" alt="youtube" /></a></li>
         </ul>
        <div class="clear"></div>
       </div>
      </header>
    
    <div id="leftmenu">
    <div class="wrapper">
    <ul id="listmenu">
    <li>Home</li>
    <li>What's e-friendship</li>
    <li>Lanching Day</li>
    <li>About Us</li>
    <li>Contact</li>
    </ul>
    <div class="clean"></div>
    </div>
    </div>
    
    <div id="right">
    <h1>Welcome to e-Freindship</h1>
    <p>e-Friendship is the new unbelievable website where you can make new friends from all over thr world. Reading is a complex cognitive process of decoding symbols in order to construct or derive meaning (reading comprehension). Reading is a means of language acquisition, of communication, and of sharing information and ideas. Like all languages, it is a complex interaction between the text and the reader which is shaped by the reader’s prior knowledge, experiences, attitude, and language community which is culturally and socially situated. The reading process requires continuous practice, development, and refinement. In addition, reading requires creativity and critical analysis. Consumers of literature make ventures with each piece, innately deviating from literal words to create images that make sense to them in the unfamiliar places the texts describe. Because reading is such a complex process, it cannot be controlled or restricted to one or two interpretations. There are no concrete laws in reading, but rather allows readers an escape to produce their own products introspectively. This promotes deep exploration of texts during interpretation.[1] Readers use a variety of reading strategies to assist with decoding (to translate symbols into sounds or visual representations of speech) and comprehension. Readers may use context clues to identify the meaning of unknown words. Readers integrate the words they have read into their existing framework of knowledge or schema (schemata theory).</p>
    <div class="clear"></div>
    </div>
    <div id="signupline">
     <p id="signuptext">Take your place and sign up</p>
      <button>Sign Up</button>
    </div>
    </body>
    </html>

＆＃13;

Answer 1

尝试将clear div移出right div：

<div id="right">...</div>
<div class="clear"></div>

即使我使用＆＃34; clear＆＃34; DIV

1 个答案: