Question

您好我正在尝试为我的家族建立一个网站，但我在使用CSS中的Float时遇到了麻烦。这就是我想要做的事情

我试图在1 div中并排创建2个div但是它继续消失clanoverlay类的背景颜色。如果我应该使用display，我会感到很困惑：inline-block;因为浮动：左;似乎使背景颜色消失。这是一个例子：

＆＃13;

div.colum2 {
	width: 100%;
	overflow: auto;
}

div.clanboard {
	font-family: SupercellMagic;
	font-size: 200%;
	color: white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	border-radius: 10px;
	background-color: #636a7c;
}
div.clanboardoverlay {
	background-color: #e4eff4;
	border-radius: 10px;
}

div.claninfo {
	font-size: 30px;
	width: 35%;
	padding: 10px 40px; 
	font-family: SupercellMagic;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}

div.clanmembers {
	font-size: 30px;
	width: 35%;
	padding: 10px 40px; 
	font-family: SupercellMagic;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}

＆＃13;

<body style="background-color: black;">

<div class=colum1>
	<div class=clanboard>
		<center>Clan [in progress]</center>
		<div class=clanboardoverlay>
			<div class=claninfo style="float: left;">
			<img src="/imgsrc/badge.png" width="75">
			<span style="font-family: SupercellMagic;">ReAdY 4 War</span><br>
			<span style="color: grey; font-size: 17px;">Members: </span><span style="color: white; font-size: 20;">46/50</span>
			<hr><span style="color: black; font-size: 15;">looking for good loyal players ready to expand and have fun</span><hr>
			<span style="color: white; font-size: 15;">Clan Score</span><span style="color: white; float: right; font-size: 15;"><img src="/imgsrc/trophy.png" width="30px" style="vertical-align: text-top;">9828</img></span>
			<hr>
			<span style="color: white; font-size: 15;">Donations/week:</span><span style="color: white; float: right; font-size: 15;">1244</span>
			<hr>
			<span style="color: white; font-size: 15;">Type:</span><span style="color: white; float: right; font-size: 15;">Invite Only</span>
			<hr>
			<span style="color: white; font-size: 15;">Required trophies:</span><span style="color: white; float: right; font-size: 15;">0</span>
			<hr>
			<span style="color: white; font-size: 15;">Location:</span><span style="color: white; float: right; font-size: 15;">International</span>
			<hr>
			<span style="color: white; font-size: 15;">Clan tag:</span><span style="color: white; float: right; font-size: 15;">#G2PRPQ</span>
			</div>
			<div class=clanmembers style="float: right;">
			Just a test :)
			</div>
		</div>
	</div>
</div>
</body>

＆＃13;

链接：http://ready4war.net/

Answer 1

您需要清除两个浮动元素的父级的浮点数。您可以使用overflow: hidden;或

.clanboardoverlay {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

Answer 2

哇试着不把CSS放在你的HTML中（不推荐）

为什么你不尝试使用flex-box？

.parent{
  width:100%;
  height:250px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
   background-color:green;
}
.child{
  width:200px;
  height:200px;
  background-color:pink;
  border: 2px solid black;
}

<div class="parent">
<div class="child">

</div>
<div class="child">

</div>
</div>

将2个div并排放置在1个div中，浮动会影响div内的背景颜色

2 个答案: