Question

只是想知道是否有人可以帮助我在这个代码笔上显示在同一行上半年和下半年？我试过display:inline;然而这并没有解决问题。

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;
}

Answer 1

    .footerwrapper {
  width: 100%;
  display:flex;
}

Display Flex解决了这个问题

Answer 2

如果您不想编辑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

Answer 3

.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 */
}

希望这有帮助

Answer 4

使用

.BFS {float:left;}
.BLFS {float:right;}

或者将BLFS元素放在HTML中，然后将其浮动到右侧。然后.BFS{float:left;}是不必要的，因为无论如何它都会填满左边。

HTML在同一行显示两个div

4 个答案: