我的CSS代码有什么问题？得到错误的输出

-1

我需要编写CSS代码，执行以下操作：

•旁白：500个像素宽

•中心浏览器窗口的75％

•页脚底部

这是我的HTML：

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
 
    <title>Welcome to Our Site</title> 
 
    <!-- google font --> 
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> 
 
    <!-- style css --> 
 

 
    <style> 
 
    body { 
 
     background-image: url('super_hero.png'); 
 
     margin: 0; 
 
     padding: 0; 
 
     height: 100%; 
 
    } 
 
    .container { 
 
     width: 75%; 
 
     margin: auto; 
 
     height: 100%; 
 
     background-color: activeborder; 
 
     position: relative 
 
    } 
 
    #body { 
 
     padding: 10px; 
 
     padding-bottom: 30px; 
 
     /* Height of the footer */ 
 
     min-height: calc(100% - 60px); 
 
    } 
 
    .heder { 
 
     width: 100%; 
 
     height: 30px; 
 
     background-color: antiquewhite 
 
    } 
 
    .footer { 
 
     width: 100%; 
 
     height: 30px; 
 
     background-color: beige; 
 
    } 
 
    .aside { 
 
     width: 500px; 
 
     float: right; 
 
    } 
 
    .section { 
 
     height: 100%; 
 
     float: left; 
 
     width: calc(100% - 500px); 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="heder"> 
 
    </div> 
 
    <div id="body"> 
 
     <div class="section"> 
 
     <p>section</p> 
 
     </div> 
 
     <div class="aside"> 
 
     <p>aside section</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>this is footer</p> 
 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

但是，我得到一个非常输出的bizzare这看起来不像的问题。谁能帮忙？

来源

2015-11-03 skeptirit

可以还张贴erronous输出的模样？ – Thomas

你已经使用了固定的一边，因此如果屏幕尺寸小于500像素，那么它会产生问题。 – Mitul

你可以运行代码片段，它看起来不像图像....或者它是正确的吗？我很困惑。老师说它应该看起来完全像图片 – skeptirit

-1

https://jsfiddle.net/jz66L8k4/ 看看#table这是最重要的部分也可以尝试调整地看到，一边是始终500像素宽。 Btw。我认为你的背景图片应该放在图片文件夹内！

来源

2015-11-03 09:04:02 Covik

不需要使用基于表格的布局。 – Rishav

为什么表格布局不好总是不好？我的意思是这可以很容易地用漂浮物完成，但是当你需要相同高度的柱时，我更喜欢桌子！ – Covik

试试这个https://jsfiddle.net/06h0fcd1/

HTML

<div class="wrapper"> 
    <div class="header">Header</div> 
    <div class="main"> 
     <div class="section">Section</div> 
     <div class="aside">Aside</div> 
    </div> 
    <div class="footer">Footer</div> 
</div>

CSS

body { 
    background: #FACD8A; 
    font-size: 20px; 
    font-weight: bold; 
} 

.wrapper { 
    width:75%; 
    margin: 0 auto; 
    background: white; 
    border: 2px solid #CCCCCD; 
} 

.main { 
    height: 90vh; 
} 

.section { 
    float: left; 
    display: inline-block; 
    padding: 15px 25px; 
    height: 100%; 
} 

.aside { 
    padding: 15px 25px; 
    border-left: 2px solid #FACD8A; 
    height: 100%; 
    width: 500px; 
    float: right; 
} 

.header, .footer { 
    padding: 15px 25px; 
} 

.header { 
    border-bottom: 2px solid #FACD8A; 
} 

.footer { 
    border-top: 2px solid #FACD8A; 
}

来源

2015-11-03 09:11:32

我的CSS代码有什么问题？得到错误的输出

回答

相关问题