Why won't my Div elements stay in line?

时间：2015-07-28 12:40:49

标签： html css inline

I've gone through the forum and seemed to have tried all the suggestions related to div layouts. I'm trying to get two rows of elements as follows: Row 1 - Number > Image > Text. Row 2 - (Blank Space to move second row right by the same amount of pixels as the above image) > Number > Image > Text.

This is my code that I've tried so far:

@import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

body {
  background-color: #f3eedd;
  width: 750px;
  overflow: scroll;
  overflow-x: hidden;
}

h1 {
  font-family: 'Londrina Sketch', cursive;
  color: #c13e18;
  font-size: 50px;
  text-align: center;
  margin: 0px 30px 0px 30px;
}

h2 {
  font-size: 20px;
  color: #c13e18;
  margin: 10px 30px 10px 30px;
}

h3 {
  font-size: 20px;
  margin: 30px 30px 0px 30px;
}

h4 {
  text-align: center;
}

p {
  font-size: 20px;
  margin: 0px 30px 0px 30px;
}

.choose {}

.number {
  display:inline-block;
  float:left;
}

.choose-image {
  display: inline-block;
  float: left;
}

.choose-text {
  display: inline-block;
  vertical-align: top;
  float: left;
}

.customise {} 

.empty-left {
  display: inline-block;
  width: 300px;
  overflow: hidden;
}

.customise-image {
  display: inline-block;
}

.customise-text {
  display: inline-block;
  vertical-align: top;
}
<h1>FROM BEGINNING TO END</h1>
<hr>
<h2>How many? What size? How old? When and why? How much? 
    If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
<hr>
<!-- choose -->
<div class="choose">
  <div class="number">
    <h4>1</h4>
  </div>
  <div class="choose-image">
    <img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" />
  </div>
  <div class="choose-text">Choose text content goes here</div>
</div>​
<div class="customise">
  <div class="empty-left"></div>
  <div class="number">
    <h4>2</h4>
  </div>
  <div class="customise-image">
    <img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" />
  </div>
  <div class="customise-text">Customise text content goes here</div>
</div>

Thanks!

4 个答案:

答案 0 :(得分：2)

你有一个错字：

.number {
    display: inline-block;
    float: left;
    }

更改为：

.customise {
    float: left;
    width: 100%;
}

.choose {
    float: left;
    width: 100%;
}
经过纠正后，我觉得这很好看。

在您的网站上，更改此内容：

.customise {
        float: left;
        width: 50%;
 }

 .choose {
       float: left;
       width: 50%;
  }

到那个：

{{1}}

答案 1 :(得分：0)

Currently change add below style

    .choose {
        width: 50%; float: left;
        }​

        .customise {
            width: 50%;
            float: left;
        }​


 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style>
      @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

      body {
      background-color: #f3eedd;
      width: 750px;
      overflow:scroll;
        overflow-x:hidden;
      }
      h1 {
        font-family: 'Londrina Sketch', cursive;
        color: #c13e18;
        font-size: 50px;
        text-align: center;
        margin: 0px 30px 0px 30px;
    }

    h2 {
        font-size: 20px;
        color: #c13e18;
        margin: 10px 30px 10px 30px;
    }

      h3 {
        font-size: 20px;
        margin: 30px 30px 0px 30px;
    }

    h4 {
    text-align: center;
    }

        p {
        font-size: 20px;
        margin: 0px 30px 0px 30px;

    }

    .choose {
    width: 50%; float: left;
    }​

    .number (
    display: inline-block;
    float: left;


    }

    .choose-image {
    display: inline-block;
    float: left;

    }

    .choose-text {
    display: inline-block;
    vertical-align: top;
    float: left;

    }

    .customise {
        width: 50%;
        float: left;
    }​

    .empty-left {
    display: inline-block;
    width: 300px;
    overflow: hidden;

    }

    .customise-image {
    display: inline-block;

    }

    .customise-text {
    display: inline-block;
    vertical-align: top;

    }


    </style>
    </head>
    <body>

    <h1>FROM BEGINNING TO END</h1>
    <hr>
    <h2>How many? What size? How old? When and why? How much? 
    If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
    <hr>
    <!-- choose -->
    <div class="choose">
    <div class="number"><h4>1</h4></div>
    <div class="choose-image">
    <img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" /></div>
    <div class="choose-text">Choose text content goes here</div>
    </div>​
    <div class="customise">
    <div class="empty-left"></div>
    <div class="number"><h4>2</h4></div>
    <div class="customise-image">
    <img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" /></div>
    <div class="customise-text">Customise text content goes here</div>
    </div>
    <!-- customise -->
    </body>
    </html>

答案 2 :(得分：0)

我不完全确定您要使用代码实现的目标。我会告诉你我的一个小秘密;）

我将其称为拆分，我可以将其拆分为多个列和行。

这是我的CSS 

.clearfix:after{clear:both;content:'';visibility:hidden;display:block;}
/*because floats have to be cleared. I use a simple clarify method
  although this may cause problems in IE <8
*/
@media only screen and (min-width:600px){/*use this if you want the elements to only be in columns for desktop computers.*/
    .split .splitOb{float:left;padding:1%;}
    .splitOb.w1{width:8%;}
    .splitOb.w2{width:18%;}
    .splitOb.w3{width:28%;}
    .splitOb.w4{width:38%;}
    .splitOb.w5{width:48%;}
    .splitOb.w6{width:58%;}
    .splitOb.w7{width:68%;}
    .splitOb.w8{width:78%;}
    .splitOb.w9{width:88%;}
}

使用这个想法，只需使用这个基本结构。

<div class="split clearfix">
    <div class="splitOb w5">
        this is on the left side
    </div>
    <div class="splitOb w5">
        this is the right side
    </div>
</div>

请记住，所有splitOb或split对象必须等于10.您可以对此进行不同的变化，甚至颠倒行的顺序。

一些数学帮助:)

百分比，你想要等于100％。无论父级的宽度如何，具有width:100%;的子元素将等于父级的100％。

所以我想说我使用上面的例子，有2 .splitOb.w5所以48％x 2 = 96％现在每边都有1％的填充。 1％x 4 = 4％。 4％+ 96％= 100％。它与所有其他宽度相同。

另外，尽量不要在身体上使用像素宽度。我说这是因为那里有很多不同的比例，从320px x 400px到1440px x 900px以及更大！

使用视口帮助您获取设备的宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这意味着如果您这样做：

body,html{width:100%;margin:0px;padding:0px;}

正文和html都是设备或浏览器宽度的100％。

答案 3 :(得分：0)

尝试display: table或只是制作一张表，除非您关注语义。我不确定这里的空间是DEMO

我制作了另一个没有该空间的版本，看起来很多better

相关问题
最新问题