Html 删除并排div之间的空间
我创建了一个Html 删除并排div之间的空间,html,css,Html,Css,我创建了一个div,允许人们选择一个节名,它将显示带有标题的适当图像。我有一些麻烦,使节列表和图像显示完全并排,并已采取相同的高度。另外,我的图片标题(figcaption)不符合图的宽度,但我可能忽略了这一点。我尝试了许多不同组合的float,overflow,display属性调整,正如其他Stackoverflow问题答案所建议的那样,但它们似乎都没有产生正确的输出 下面是一段代码: 代码也包含在这里的代码中 CSS: #main { width: 50%; padding
div
,允许人们选择一个节名,它将显示带有标题的适当图像。我有一些麻烦,使节列表和图像显示完全并排,并已采取相同的高度。另外,我的图片标题(figcaption
)不符合图的宽度,但我可能忽略了这一点。我尝试了许多不同组合的float
,overflow
,display
属性调整,正如其他Stackoverflow问题答案所建议的那样,但它们似乎都没有产生正确的输出
下面是一段代码:
代码也包含在这里的代码中
CSS:
#main {
width: 50%;
padding: 15px;
margin: 0 auto;
}
.gamemode {
background: #eee;
padding: 19px;
border-bottom: 4px solid #ccc;
}
.gamemode:hover {
background: #ccc;
cursor: pointer;
border-bottom: 4px solid #0093dd;
}
.gamemode:selected {
border-bottom: 4px solid #0093dd;
}
#gm-text {
width: 25%;
display: inline-block;
vertical-align: middle;
}
#gm-image {
width: 74.5%;
height: 556px;
background: url(images/survivalimg.png);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.8);
color: #FFF;
margin-top: 415px;
margin-left: -40px;
width: 100%;
padding: 0px 20px;
}
figcaption p {
font-size: 1em;
color: #FFF;
}
#captitle {
font-size: 1.4em;
color: #FFF;
}
<div id="main">
<div id="showcase">
<div id="gm-text">
<p class="gamemode" id="survival" onclick="changeImageSurvival();"><i class="fa fa-globe"></i> Survival</p>
<p class="gamemode" id="creative" onclick="changeImageCreative();"><i class="fa fa-building"></i> Creative</p>
<p class="gamemode" id="sg" onclick="changeImageSG();"><i class="fa fa-cutlery"></i> Survival Games</p>
<p class="gamemode" id="factions" onclick="changeImageFactions();"><i class="fa fa-link"></i> Factions</p>
<p class="gamemode" id="kitpvp" onclick="changeImageKitPvP();"><i class="fa fa-bullseye"></i> KitPvP</p>
<p class="gamemode" id="ctf" onclick="changeImageCTF();"><i class="fa fa-flag"></i> Capture the Flag</p>
<p class="gamemode" id="spleef" onclick="changeImageSpleef();"><i class="fa fa-spoon"></i> Spleef</p>
</div>
<div id="gm-image">
<figure>
<figcaption>
<p id="captitle">Section 1</p>
<p id="caption">Section one info.</p>
</figcaption>
</figure>
</div>
</div>
</div>
如果您查看CSS,您会注意到这两个项目的“我的宽度”设置为25%和74.5%,这两个值加起来并不等于100%。如果我将1设置为75%,它只会移动到一个新行
HTML:
#main {
width: 50%;
padding: 15px;
margin: 0 auto;
}
.gamemode {
background: #eee;
padding: 19px;
border-bottom: 4px solid #ccc;
}
.gamemode:hover {
background: #ccc;
cursor: pointer;
border-bottom: 4px solid #0093dd;
}
.gamemode:selected {
border-bottom: 4px solid #0093dd;
}
#gm-text {
width: 25%;
display: inline-block;
vertical-align: middle;
}
#gm-image {
width: 74.5%;
height: 556px;
background: url(images/survivalimg.png);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.8);
color: #FFF;
margin-top: 415px;
margin-left: -40px;
width: 100%;
padding: 0px 20px;
}
figcaption p {
font-size: 1em;
color: #FFF;
}
#captitle {
font-size: 1.4em;
color: #FFF;
}
<div id="main">
<div id="showcase">
<div id="gm-text">
<p class="gamemode" id="survival" onclick="changeImageSurvival();"><i class="fa fa-globe"></i> Survival</p>
<p class="gamemode" id="creative" onclick="changeImageCreative();"><i class="fa fa-building"></i> Creative</p>
<p class="gamemode" id="sg" onclick="changeImageSG();"><i class="fa fa-cutlery"></i> Survival Games</p>
<p class="gamemode" id="factions" onclick="changeImageFactions();"><i class="fa fa-link"></i> Factions</p>
<p class="gamemode" id="kitpvp" onclick="changeImageKitPvP();"><i class="fa fa-bullseye"></i> KitPvP</p>
<p class="gamemode" id="ctf" onclick="changeImageCTF();"><i class="fa fa-flag"></i> Capture the Flag</p>
<p class="gamemode" id="spleef" onclick="changeImageSpleef();"><i class="fa fa-spoon"></i> Spleef</p>
</div>
<div id="gm-image">
<figure>
<figcaption>
<p id="captitle">Section 1</p>
<p id="caption">Section one info.</p>
</figcaption>
</figure>
</div>
</div>
</div>
生存
创造性的
生存游戏
派系
kitpvp
捕获标志
spleef
第1节
请参见此处
这是一个恼人的内联块问题。解决这个问题的一个方法是设置
font-size:0;
在容器元素上。当然,您必须在包含文本的每个子元素上声明所需的字体大小。如果不这样做,font-size:0属性将隐藏任何文本
更新的JSFIDLE:
您需要去掉div之间的空格,因为它是内联块。
改变这个,
<div id="gm-text">
</div>
<div id="gm-image">
到
或
这样你可以保持你的宽度25%和75%。
有关相同高度的问题,请参见相关问题。
<div id="gm-text">
</div><!--
--><div id="gm-image">