为什么我的 Div 元素不能保持一致？

Question

我浏览了论坛，似乎已经尝试了所有与 div 布局相关的建议。我正在尝试获取两行元素，如下所示：第 1 行 - 数字 > 图像 > 文本。第 2 行 -（空白 Space 将第二行向右移动与上图相同的像素数）> 数字 > 图像 > 文本。

这是我到目前为止尝试过的代码：

@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>

谢谢！

Answer 1

你打错了：

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

更改为：

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

Answer 2

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>

Answer 3

我不完全确定你想用你的代码实现什么。我会让你知道我的一个小秘密 ;)

我称之为拆分，我可以拆分成多列和多行。

这是我的 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 或拆分对象都必须等于 10。您可以对其进行不同的修改，甚至可以颠倒行的顺序。

一点点数学帮助 :)

对于百分比，您希望等于 100%。无论父元素的宽度如何，具有 width:100%; 的子元素都将等于父元素的 100%。

假设我使用上面的示例，有 2 个 .splitOb.w5，所以 48% x 2 = 96% 现在 1% 的每一侧都有填充。 1% x 4 = 4%。 4% + 96% = 100%。其他宽度都一样。

另外，尽量不要在body上使用像素宽度。我这样说是因为那里有很多不同的比例，从 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%。

Answer 4

尝试 display: table 或直接创建 table，除非您担心语义问题。我不确定 space 是什么，这里是 DEMO

我做了另一个没有那个的版本space它看起来很多better

为什么我的 Div 元素不能保持一致？

Why won't my Div elements stay in line?

html

css

inline