时间戳

首页 > 解决方案 > 左边两个 div，右边一个，HTML 没有变化，只有 CSS

css - 左边两个 div，右边一个，HTML 没有变化，只有 CSS

问题描述

我希望在左侧获得两个 div，在右侧获得一个。难题是我只需要使用 CSS 来完成此任务。我无法触摸 HTML 和 JavaScript。

如果需要，请查看JSFiddle 。

我想要红色<div>在蓝色的正下方并与蓝色相邻<div>。这可能只使用CSS吗？

div.div1 {
   float: left;
   height: 400px;
   width: 200px;
   background-color: blue;
}
div.div2 {
   clear: left;
   float: left;
   height: 15px;
   width: 200px;
   background-color: red;
}    
div.div3 {
   height: 425px;
   overflow: hidden;
   background-color: green;
}
<body>
    <div class="div1">Div1</div>
    <div class="div3">Div3</div>
    <div class="div2">Div2</div>
</body>

标签： css

解决方案

使用 CSS-grid，您可以根据需要轻松调整 div，而无需更改 HTML。

这是一个例子：

body {
  display: grid;
  height: 100vh;
  margin: 0;
  grid-template-areas: 
  "a c" 
  "a c"
  "a c"
  "b c";
}

div.div1 {
  grid-area: a;
  background-color: blue;
}

div.div2 {
  grid-area: b;
  background-color: red;
}

div.div3 {
  grid-area: c;
  background-color: green;
}
<body>
  <div class="div1">Div1</div>
  <div class="div3">Div3</div>
  <div class="div2">Div2</div>
</body>

推荐阅读