CSS

Question

我是css的新手，想创建以下内容：

因此我创建了以下代码：

#outer{
  height: 420px;
  width: 550px;
  background-color: green
}

#left_space{
  float: left;
  height: 100px;
  width: 100px;
  background-color: black;
}

#right_space{
  float: right;
  height: 50px;
  width: 50px;
  background-color: yellow; 
}

<div id="outer">
   <div id="left_space">
   <div id="right_space">
    </div>
   </div>
</div>

然而，这给了我以下输出：

关于我应该改变什么的任何反馈？

Answer 1

https://jsfiddle.net/Liamm12/f69L8epL/1/

您可以在css

中使用dispaly:flex来实现

如果您想制作空格，可以使用margin

如果您想要这样做，我看到您在上面的屏幕截图中有框的边框，您需要为每个框使用border: 1px solid #000;

如果您希望将绿色背景设为整页，则可以在width:100%;课程中将#outer更改为100％

    #outer{
  height: 420px;
  width: 550px;
  background-color: green;
      display: flex;
}

#left_space{
  float: left;
  height: 100px;
  width: 100%;
  background-color: black;
      margin-left: 1%;
    margin-top: 1%;
    margin-right: 1%;
}

#right_space{
  float: right;
  height: 100px;
  width: 100%;
      border: 3px solid #000;
  background-color: yellow; 
      margin-left: 1%;
    margin-top: 1%;
    margin-right: 1%;
}

 <div id="outer">
 <div id="left_space"></div>
 <div id="right_space"></div>
   </div>

Answer 2

我认为你正在寻找这个：

<html>
<head>
  <title>Test</title>
</head>
<body>
  <div id="outer">
  <div id="left_space">
   </div>
  <div id="right_space">

  </div>
 </div>
</body>
</html>

CSS

#outer{
  display: flex;
  height: 420px;
  width: 550px;
  background-color: green
}

#left_space{
  flex:1;
  height: 100;
  width: 100;
  background-color: black;
  margin: 10px 10px 300px 10px;
}

#right_space{
  flex:1;
  height: 100;
  width: 100;
  background-color: yellow; 
  margin: 10px 10px 300px 10px;
}

您可以访问此链接：http://flexboxfroggy.com/ 了解有关flexbox的更多信息：）

在另一个div中创建特定的div

2 个答案:

CSS