Question

我试图将某些东西向右移动，但它并没有按预期工作。我想尝试像eu-accounts.com这样的东西＆gt;右侧横幅与类。

这就是我现在所拥有的

<!DOCTYPE HTML>
<html>
<head>
   <title> Haltqt - Accounts </title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

  <div id="banner">

  </div>

  <div id="content">
    hier komt content
    <div id="product">
       Products will come here
    </div>
 </div>
 <div id="classen"> hier komen de classes
 </div>

 </body>

 <footer> &copy Haltqt-accounts.com </footer>

</html>

和css：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#banner {
margin:0px;
padding:0px;
width:100%;
height:300px;
background-color:#000; /* deze staat nu op zwart, dit is de banner. dit moeten we op transparant zetten en in de body een wallpaper als achtergrond om het effect te krijgen van eu-accounts.com*/ 
}

#content {
margin: 0 auto;
padding:0;
width: 70%;
background-color:yellow;
}

footer{
margin: 0 auto;
padding:0;
width: 70%;
text-align:center;
}

#classen {
width:15%;
margin:0 auto;
padding:0;
float:right;
background-color:red;
}

#product {
margin:5px;
padding:5px;

}

http://jsfiddle.net/y8j5hw5c/

你能看看为什么班级classen没有正确浮动吗？感谢。

Answer 1

您可以执行以下操作：预定义尺寸：

#content {
   margin: 0 0 0 15%;
   padding:0;
   width: 70%;
   float:left;
   background-color:yellow;
}

您还应该使用footer清除clear: both;元素的浮点数 P.S。：您应该将footer放在body元素中。

JSFiddle

Answer 2

我想知道您的页脚标签是否超出您的身体标签是否有特殊原因。将两者都添加到页脚。并在内容中添加float。

footer{
margin: 0 auto;
padding:0;
width: 70%;
text-align:center;
clear: both;
}
#content {
   margin: 0 0 0 auto;
   padding:0;
   width: 70%;
   float:left;
   background-color:yellow;
}

Answer 3

要添加其他解决方案方法，已在此处提出并正确回答了类似的问题： 2 column div layout: right column with fixed width, left fluid

此方法使用围绕两列的其他容器div，以使左列灵活并允许其使用任何剩余空间，而右列保持其固定宽度。

您问题的可能变体： http://jsfiddle.net/kbe0m9ug/

浮动不能正常工作

3 个答案:

JSFiddle