Question

我希望得到包含＆＃39;自动售货机的黄色div经销商等＆＃39;位于徽标旁边（徽标右侧）。不确定为什么它不能正常工作，因为它向左浮动，但由于某种原因低于徽标div。谁能告诉我我犯了什么错误？

＆＃13;

body{
	background-color:#fff;	
	padding:0px;
	margin:0 auto;
}

#header-wrap{
	width:100%;
	height:100px;
	margin: 0 auto;
	background:#BABABA;
	border-bottom: 1px solid #211c20;
	border-top: 1px solid #211c20;
}

#header{
	width:960px;
	height:auto;
	margin: 0 auto;
	background:#72A1D9;
	padding-top:15px;
}

.logo{
	width:130px;
	height:50px;
	border:1px solid black;
	padding-top:20px;
	padding-left:50px;
	font-size:24px;
}

.links{
	background:#FFFD00;
	float:left;
	height:50px;
	width:820px;
	font-size:24px;
}

＆＃13;

<div id="header-wrap">
    
    <div id="header">

        <div class="logo">LOGO</div>

        <div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>

    </div>

</div>

＆＃13;

Answer 1

您的班级徽标也必须浮动，然后您的标题宽度为960，您的徽标+链接大小优于960px（130 + 50 + 2 + 820 = 1002px）

正确的CSS是 `

#header{
    width:960px;
    height:auto;
    margin: 0 auto;
    background:#72A1D9;
    padding-top:15px;
}

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
}

.links{
    background:#FFFD00;
    float:left;
    height:50px;
    width:778px;
    font-size:24px;
}

`

Answer 2

您需要将徽标设置为display: inline-block。

＆＃13;

@charset "utf-8";

/* CSS Document */

body {
  background-color: #fff;
  padding: 0px;
  margin: 0 auto;
}
#header-wrap {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  background: #BABABA;
  border-bottom: 1px solid #211c20;
  border-top: 1px solid #211c20;
}
#header {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background: #72A1D9;
  padding-top: 15px;
}
.logo {
  width: 130px;
  height: 50px;
  border: 1px solid black;
  padding-top: 20px;
  padding-left: 50px;
  font-size: 24px;
  display: inline-block;
}
.links {
  background: #FFFD00;
  float: right;
  height: 50px;
  width: 775px;
  font-size: 24px;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>Untitled Document</title>
</head>

<body>



  <div id="header-wrap">

    <div id="header">
      <div class="logo">LOGO</div>
      <div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>
    </div>
  </div>


</body>

</html>

＆＃13;

Answer 3

你有两个问题：

.logo也必须具有浮动属性
#header宽度为960像素，徽标宽度为130宽度+ 50填充+距离边框左边2px，边框右边= 182px，.links的宽度为820px，因此总宽度大于{{ 1}}（1002 px）。

您需要优化您的CSS，例如：

#header#

并且

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
}

Answer 4

＆＃13;

select
    'alter login ' + quotename(name) + ' with name = ' + quotename(name + '_OLD')
from
    sys.syslogins
where
    name like 'DOMAIN\Group%'

＆＃13;

@charset "utf-8";
/* CSS Document */
body{
	background-color:#fff;	
	padding:0px;
	margin:0 auto;
}

#header-wrap{
	width:100%;
	height:100px;
	margin: 0 auto;
	background:#BABABA;
	border-bottom: 1px solid #211c20;
	border-top: 1px solid #211c20;
        overflow:hidden;
}

#header{
	width:960px;
	height:100%;
	margin: 0 auto;
	background:#72A1D9;
	padding-top:15px;
}

.logo{
	width:130px;
	height:50px;
	border:1px solid black;
        text-align:center;
	font-size:24px;
        box-sizing: border-box;
        display: inline-block;
}

.links{
	background:#FFFD00;
	float:right;
	height:50px;
	width:820px;
	font-size:24px;
        box-sizing: border-box;
        display: table;
} 
.links p{
        display: table-cell;
        vertical-align: middle;
        margin: 0;
 }
.logo p{
 
        margin: 0;
        line-height: 50px;
        text-align: center;

}

＆＃13;

Answer 5

将float应用于元素时，此元素将保持其原始垂直位置，为了使用浮点数实现您想要的效果，您应将float:left同时应用于.logo和{ {1}}所以两者都会左移并且并排站立。

另一种解决方案当然是再次使用.links，但如果两个元素之间存在空格，则通常会产生两个元素之间的微小间隙。

请记住，如果你将它们都漂浮在一起，你可能必须clearfix父母，这样你就不会失去它的高度。

为什么这个div低于另一个而不是它旁边？

5 个答案: