只是想知道是否有人可以帮助我在这个代码笔上显示在同一行上半年和下半年?我试过display:inline;
然而这并没有解决问题。
http://codepen.io/EuanR/pen/BNEBvE
HTML:
<HTML>
<HEAD>
<title>Homepage</title>
</HEAD>
<HEADER>
<H1 id="landingpagelg">Header</H1>
<H2 id="landingpagesm">Sub Header</H2>
</HEADER>
<BODY>
<div class="footerwrapper">
<div class="BFS">
<P>1st half</P>
</div>
<div class="BLFS">
<P>2nd half</P>
</div>
</div>
</script>
</html>
CSS:
a {
text-decoration: none;
}
body {
background-color: #161616;
}
header {
height: 100%;
background-image: url(http://i.imgur.com/11nVLmd.jpg);
background-size: cover;
background-position: center;
margin-bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
#landingpagelg {
font-family: Caviar Dreams;
font-size: 42px;
color: #FFF;
letter-spacing: 1px
}
#landingpagesm {
font-family: Caviar Dreams;
font-size: 21px;
color: #FFF
}
#CMSub {
min-width: 75px;
}
a {
color: #000;
}
a.hover {
color: 0000EE;
}
::selection {
background: #FFB870;
/*#CCCCCC*/
}
::-moz-selection {
background: #FFB870;
}
img::selection {
background: transparent
}
img::-moz-selection {
background: transparent
}
input {
width: 150px;
border: 1px solid;
border-radius: 6px;
height: 25px;
padding: 4px;
}
textarea {
border: 1px solid;
max-width: 500px;
max-height: 250px;
border-radius: 5px;
width: 250px;
height: 125px;
}
#github {
padding-right: 5px;
}
.footerwrapper {
width: 100%;
}
.BFS {
height: 150px;
width: 50%;
background-color: #161616;
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
}
答案 0 :(得分:1)
.footerwrapper {
width: 100%;
display:flex;
}
Display Flex解决了这个问题
答案 1 :(得分:0)
如果您不想编辑CSS,只需添加以下行
即可.footerwrapper {
font-size: 0; /*Removes white space in inline-block elements*/
}
.BFS {
box-sizing: border-box;
display: inline-block;
}
.BLFS {
box-sizing: border-box;
display: inline-block;
}
确保在font-size
.footerwrapper
答案 2 :(得分:0)
.footerwrapper {
width: 100%;
border: 1px solid black;
overflow: hidden;
}
.BFS {
height: 150px;
background-color: #161616;
width: 50%;
float:left; /* add this */
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
float:left; /* add this */
}
希望这有帮助
答案 3 :(得分:0)
使用
.BFS {float:left;}
.BLFS {float:right;}
或者将BLFS元素放在HTML中,然后将其浮动到右侧。然后.BFS{float:left;}
是不必要的,因为无论如何它都会填满左边。