css - 简单的 CSS 样式 - 定位 div

Question

这是一个关于 CSS 的非常简单的问题。我想得到图片中描绘的风格，我尝试了这段代码：

#parent {
    overflow: hidden;
text-align:center;
}
.navbar {
position:absolute;
top:0px;
right:3px;  
}
.logo {
float:left;
}
.table {
float:left;
}

但这对我不起作用，我明白了：

Answer 1

尝试：

#parent {
overflow: hidden;
text-align:center;
margin:auto;
width:80%;
}
.navbar {
position:absolute;
top:0px;
right:3px;  
}
.logo {
float:left;
}
.table {
float:left;
}

为了完成您想要的，您需要margin:auto使用width:80%.

Answer 2

我会给你的父元素一个明确的宽度，然后从那里定位：

#parent {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

.navbar {
  position: absolute;
  top: 0;
  right: 3px;
}

.logo {
  margin-bottom: 20px;
  display: inline-block;
}

.table {
   width: 100%;
 }

我不知道您在页面上还有哪些其他内容，但是您的 .logo 元素应该使用默认 HTML 流出现在您想要的位置。如果表是 100%，它将清除。您应该能够在没有浮动的情况下完成此操作。