HTML, отображающий два div в одной строке

Просто интересно, может ли кто-нибудь помочь мне получить 1-ю половину и 2-ю половину на этом кодексе для отображения на одной строке? Я пробовал display:inline;, но это не исправить проблему.HTML, отображающий два div в одной строке

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

источник

2015-08-12 Anonymous

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

Display Flex решает проблему

источник

2015-08-12 02:09:54

Если вы не хотите редактировать 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

источник

2015-08-12 02:09:48

«Если вы не хотите редактировать свой CSS, просто добавьте эти строки CSS» –

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

Надеется, что это помогает

источник

2015-08-12 02:12:05 jKIM

Использования

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

В качестве альтернативы положить BLFS сначала в вашем HTML и поместите его вправо. Тогда .BFS{float:left;} не нужен, так как он все равно будет заполняться слева.

источник

2015-08-12 02:18:09

HTML, отображающий два div в одной строке

ответ

Смежные вопросы