Как разместить элементы div inline?

Question

Я пытаюсь разместить эти два divs inline.

HTML

<div class="thisFlak"> 
</div> 

<div class="thisFlakNotes"> 
</div> 

CSS

.thisFlak{ 
    width: 603px; 
    height: 253px; 
    border: 2px solid red; 
    margin-left: 10px; 
    margin-bottom: 30px; 
} 
.thisFlakNotes{ 
    width: 100px; 
    height: 200px; 
    border: 1px solid black; 
    background: white; 
} 

Я не могу связываться с ".thisFlak" на много, потому что держать много других вещей.

FIDDLE
https://jsfiddle.net/xwzcbn6w/

Answer 1

DEMO

CSS

.thisFlak { 
    width: 603px; 
    height: 253px; 
    border: 2px solid red; 
    margin-left: 10px; 
    margin-bottom: 30px; 
    /* to make it inline */ 
    display: inline-block; 
    /* aligning vertically you can make it top/bottom/baseline */ 
    vertical-align: middle 
} 

.thisFlakNotes { 
    width: 100px; 
    height: 200px; 
    border: 1px solid black; 
    background: white; 
    /* to make it inline */ 
    display: inline-block; 
    /* aligning vertically you can make it top/bottom/baseline */ 
    vertical-align: middle 
} 

Answer 2

Что вы ищете это:

display: inline-block; 

Ваш код:

.thisFlak{ 
    width: 603px; 
    height: 253px; 
    border: 2px solid red; 
    margin-left: 10px; 
    margin-bottom: 30px; 
    display: inline-block; 
} 

.thisFlakNotes{ 
    width: 100px; 
    height: 200px; 
    border: 1px solid black; 
    background: white; 
    display: inline-block; 
} 

Answer 3

поплавок ... https://jsfiddle.net/maky/xwzcbn6w/2/

.thisFlak { 
    width: 603px; 
    height: 253px; 
    border: 2px solid red; 
    margin-left: 10px; 
    margin-bottom: 30px; 
    float: left; 
} 

.thisFlakNotes { 
    width: 100px; 
    height: 200px; 
    border: 1px solid black; 
    background: white; 
    float: left; 
} 

Answer 4

display:inline-block; позволит сохранить размеры и положить дивы на одной и той же линии. Он будет относиться к дивы, как слова в предложении, хотя, так что вы должны закомментировать любое пространство между ними и как они разной высоты, вам нужно будет добавить вертикальное выравнивание:

.thisFlak{ 
 
    vertical-align:top; 
 
    width: 603px; 
 
    height: 253px; 
 
    border: 2px solid red; 
 
    margin-left: 10px; 
 
    margin-bottom: 30px; 
 
    display:inline-block; 
 
} 
 
.thisFlakNotes{ 
 
    vertical-align:top; 
 
    width: 100px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background: white; 
 
    display:inline-block; 
 
}

<div class="thisFlak"> 
 
</div><!-- comment out this space 
 

 
--><div class="thisFlakNotes"> 
 
</div>

Update

Кроме того, если вы не хотите, чтобы обернуть коробки, когда страница слишком мала для них, чтобы поместиться на одной линии, то вам нужно добавить white-space:nowrap к родителю (или убедитесь, что ширина родительского шире, чем два чи ldren)

Answer 5

Добавляя float:left/display:inline в оба класса, вы можете его достичь.

Вот обновленная ссылка скрипки Updated fiddle

Answer 6

просто поставить дисплей: встроенный блок или плавать: слева каждый DIV

.thisFlak{ 
    width: 603px; 
    height: 253px; 
    border: 2px solid red; 
    margin-left: 10px; 
    margin-bottom: 30px; 
    float : left; 
    display : inline-block; 
} 
.thisFlakNotes{ 
    width: 100px; 
    height: 200px; 
    border: 1px solid black; 
    background: white; 
float : left; 
display : inline-block; 
}