Html 两列CSS布局和框内的列_Html_Css

Html 两列CSS布局和框内的列

html css

Html 两列CSS布局和框内的列,html,css,Html,Css,我想用框1（框1）和框2（框2）创建两列页面。然后在h2之后，我想在box2中创建两列，分别是box2.1和box2.2 这是我的HTML代码 <body> <div id="box1"> <h1>Here is the box one.</h2> </div> <div id="box2"> <h2>Here is the box two.</h2> <di

我想用框1（框1）和框2（框2）创建两列页面。然后在h2之后，我想在box2中创建两列，分别是box2.1和box2.2

这是我的HTML代码

<body>
  <div id="box1">
  <h1>Here is the box one.</h2>
  </div>

  <div id="box2">
  <h2>Here is the box two.</h2>

      <div id="box21">
      <p>Here is the box2.1</p>
      </div>

      <div id="box22">
      <p>Here is box 2.2</p>
      </div>
  </div>
</body>

在那之后，我不知道该怎么办。尝试了很多方法，但都不起作用。您能在这里帮忙吗？

它可以帮助您：

HTML:

<div id="box1">
  <h1>Here is the box one.</h2>
  </div>
  <div id="box2">
  <h2>Here is the box two.</h2>
      <div id="box21">
      <p>Here is the box2.1</p>
      </div>
      <div id="box22">
      <p>Here is box 2.2</p>
      </div>
  </div>

#box1{
    float:left;
    widht:50%;
    background:#FF0000;
}
#box2{
    float:left;
    width:50%;
    background:#00FF00;
}
#box21{
    float:left;
    width:50%;
    background:#0000FF;
}
#box22{
    float:left;
    width:50%;
    background:#e4e4e4;
}

为了提醒您，不要在id或类名中使用

点（.）

。您还可以通过在所有div中使用相同的类名来简化CSS

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

或以下代码：

#box1, #box2, #box21, #box22{
    float:left;
    width:50%;
}

请参见示例：

它可能会帮助您：

HTML:

<div id="box1">
  <h1>Here is the box one.</h2>
  </div>
  <div id="box2">
  <h2>Here is the box two.</h2>
      <div id="box21">
      <p>Here is the box2.1</p>
      </div>
      <div id="box22">
      <p>Here is box 2.2</p>
      </div>
  </div>

#box1{
    float:left;
    widht:50%;
    background:#FF0000;
}
#box2{
    float:left;
    width:50%;
    background:#00FF00;
}
#box21{
    float:left;
    width:50%;
    background:#0000FF;
}
#box22{
    float:left;
    width:50%;
    background:#e4e4e4;
}

为了提醒您，不要在id或类名中使用

点（.）

。您还可以通过在所有div中使用相同的类名来简化CSS

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

或以下代码：

#box1, #box2, #box21, #box22{
    float:left;
    width:50%;
}

参见示例：

谢谢@Arif。我记得点（.）是用来选择类的，使用它作为id名不是一个好主意。非常感谢。我将尝试以下代码：）谢谢@Arif。我记得点（.）是用来选择类的，使用它作为id名不是一个好主意。非常感谢。我将尝试以下代码：）