Home html Blocks DIV horizontally

Blocks DIV horizontally




It is necessary to display the blocks #main div horizontally, so as not to transfer to the new line, if reached the limit width of the block #main .

I tried float: left; display: inline-block;

1, Authority 100%


& lt; div id = "main" & gt;
    & lt; div & gt; & lt; / div & gt;
    & lt; div & gt; & lt; / div & gt;
    & lt; div & gt; & lt; / div & gt;
    & lt; div & gt; & lt; / div & gt;
  & lt; / div & gt;


& lt; style & gt;
  * {
    margin: 0px;
    Padding: 0px;
  html, body {
    HEIGHT: 100%;
  Body {
    Background-Color: #CCC;
  Div {
    border: 1px solid #fff;
    margin: 10px;
    Text-Align: Center;
  #main {
    width: 1119px;
    Height: 150px;
    Overflow: Hidden;
  # Main & gt; div {
    width: 150px;
    height: 120px;
    Display: INLINE-BLOCK;
  & lt; / style & gt;



Is not it easier for all three blocks to set the width and height and then just add all float: left


It is very easy: the blocks display: inline-block; Parent white-space: nowrap; . Thus, we do not permit the transfer of lines.

Previous articleTabControl in WPF
Next articleXpath text ()

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions