Hoe plaats je twee div’s naast elkaar?

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Antwoord 1, autoriteit 100%

Een of beide binnenste div’s laten zweven.

Drijvende één div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

of als je beide floats gebruikt, moet je de wrapper divaanmoedigen om beide floated children te bevatten, anders denkt het dat het leeg is en zet het geen rand om hen heen

Beide div’s zwevend:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

Antwoord 2, autoriteit 29%

Twee div’s hebben,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

u kunt ook de eigenschap displaygebruiken:

#div1 {
    display: inline-block;
}
#div2 {
    display: inline-block;
}

jsFiddle voorbeeld hier.

Als div1een bepaalde hoogte overschrijdt, wordt div2onderaan naast div1geplaatst. Gebruik vertical-align:top;op div2om dit op te lossen.

jsFiddle voorbeeld hier.

Antwoord 3, autoriteit 7%

Je kunt elementen naast elkaar plaatsen door de CSS float-eigenschap te gebruiken:

#first {
float: left;
}
#second {
float: left;
}

Je moet ervoor zorgen dat de wrapper div ruimte laat voor zweven in termen van breedte, en dat marges etc correct zijn ingesteld.

Antwoord 4, autoriteit 5%

Probeer het flexbox-model te gebruiken. Het is gemakkelijk en kort om te schrijven.

Live Jsfiddle

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

standaardrichting is rij. Het wordt dus naast elkaar uitgelijnd in de #wrapper.
Maar het wordt niet ondersteund IE9 of minder dan die versies

Antwoord 5, autoriteit 4%

Optie 1

Gebruik float:leftop beide divelementen en stel een % breedte in voor beide div elementen met een gecombineerde totale breedte van 100%.

Gebruik box-sizing: border-box;op de zwevende div-elementen. De waarde border-box dwingt de opvulling en randen in de breedte en hoogte in plaats van deze uit te breiden.

Gebruik clearfix op de <div id="wrapper">om de zwevende onderliggende elementen te wissen, waardoor de wrapper-div op de juiste hoogte wordt geschaald.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

Optie 2

Gebruik position:absolutevoor het ene element en een vaste breedte voor het andere element.

Voeg position:relative aan <div id="wrapper">toe om onderliggende elementen absoluut te positioneren in de <div id="wrapper">element.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Optie 3

Gebruik display:inline-blockop beide divelementen en stel een % breedte in voor beide div elementen met een gecombineerde totale breedte van 100%.

En nogmaals (hetzelfde als float:leftvoorbeeld) gebruik box-sizing: border-box;op de div-elementen. De waarde border-box dwingt de opvulling en randen in de breedte en hoogte in plaats van deze uit te breiden.

OPMERKING:inline-block-elementen kunnen spatiëringsproblemen hebben, omdat deze worden beïnvloed door spaties in HTML-opmaak. Meer informatie hier: https://css-tricks.com/ vechten-de-ruimte-tussen-inline-blok-elementen/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}
#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

Een laatste optie zou zijn om de nieuwe weergaveoptie flex te gebruiken, maar houd er rekening mee dat browsercompatibiliteit een rol kan spelen:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Antwoord 6, autoriteit 3%

hier is de oplossing:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

uw demo bijgewerkt;

http://jsfiddle.net/dqC8t/1/

Antwoord 7, autoriteit 2%

Het is heel gemakkelijk –
je zou het op de moeilijke manier kunnen doen

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

<div class="left">Left</div>
<div class="right">Right</div>

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}
.right {
    float: right;
    width: 200px;
    background: yellow;
}

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
</Grid>

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>