当前位置：文江博客话题详情

css 使用 display 或 float 进行定位，我可以使用 display 属性获取此结构吗

发布于 2024-12-07 23:18:17 字数 358 浏览 0 评论 0原文

鉴于此 HTML：

<div id="div1">
    <div id="div1a"></div>
    <div id="div1b"></div>
    <div id="div1c"></div>
    <div id="div1d"></div>
</div>
<div id="div2a"></div>

我可以使用 CSS 显示属性获取此结构吗？

Given this HTML:

<div id="div1">
    <div id="div1a"></div>
    <div id="div1b"></div>
    <div id="div1c"></div>
    <div id="div1d"></div>
</div>
<div id="div2a"></div>

Can I get this structure using CSS display property?

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

旧时光的容颜 2024-12-14 23:18:17

当然，可以使用以下 CSS 来完成：

/* Height of the top box.  Change as needed to suit your layout */
#div1a {
  height: 50px;  
}

/* 3 left side boxes.  Again, alter the height/width as needed.  If you change
   the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
  width: 100px;
  height: 60px;  

  /* This bit causes them to float to the left in a vertical row of boxes */
  float: left;
  clear: both;   
}

/* Increased height of the last box on the left */
#div1d {
  height: 200px;   
}

/* Main content box on the right.  min-height can be changed as needed. 
   The margin makes room for the 3 boxes floating down the left side. 
   You read its properties as margin: top right bottom left; */
#div2a {  
  min-height: 365px;  
  margin: 0 20px 0 140px;   
}

/* Generic margin/padding for all <div>'s */
div {
  margin: 5px;
  padding: 5px;
}

/* Remove the generic margin for #div1 */
#div1 { 
  margin: 0;
}

实际演示。

Sure, it can be done with the following CSS:

/* Height of the top box.  Change as needed to suit your layout */
#div1a {
  height: 50px;  
}

/* 3 left side boxes.  Again, alter the height/width as needed.  If you change
   the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
  width: 100px;
  height: 60px;  

  /* This bit causes them to float to the left in a vertical row of boxes */
  float: left;
  clear: both;   
}

/* Increased height of the last box on the left */
#div1d {
  height: 200px;   
}

/* Main content box on the right.  min-height can be changed as needed. 
   The margin makes room for the 3 boxes floating down the left side. 
   You read its properties as margin: top right bottom left; */
#div2a {  
  min-height: 365px;  
  margin: 0 20px 0 140px;   
}

/* Generic margin/padding for all <div>'s */
div {
  margin: 5px;
  padding: 5px;
}

/* Remove the generic margin for #div1 */
#div1 { 
  margin: 0;
}

Demo of it in action.

回复收藏 0 原文

离不开的别离 2024-12-14 23:18:17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #f4f4f4
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.colleft{
   position: relative;
   width: 100%;
   right: 84%;
   background-color: #f4f4f4
}
.col1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 82%;
   left: 101%;
   background-color: #e6e6e6
}
.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 14%;
   left: 3%;
   background-color: #e6e6e6
}
.footer{
   float: left;
   width: 100%;
   background-color: #b4caf7
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
    <div class="header">
        DIV1A
    </div>
    <div class="colleft">
        <div class="col1">
            DIV2A
        </div>
        <div class="col2">
            <div id="div1b">DIV1B</div>
            <div id="div1c">DIV1C</div>
            <div id="div1d">DIV1D</div>
        </div> 
    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #f4f4f4
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.colleft{
   position: relative;
   width: 100%;
   right: 84%;
   background-color: #f4f4f4
}
.col1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 82%;
   left: 101%;
   background-color: #e6e6e6
}
.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 14%;
   left: 3%;
   background-color: #e6e6e6
}
.footer{
   float: left;
   width: 100%;
   background-color: #b4caf7
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
    <div class="header">
        DIV1A
    </div>
    <div class="colleft">
        <div class="col1">
            DIV2A
        </div>
        <div class="col2">
            <div id="div1b">DIV1B</div>
            <div id="div1c">DIV1C</div>
            <div id="div1d">DIV1D</div>
        </div> 
    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

missyouangeled

文章 0 评论 0

三生一梦

文章 0 评论 0

压抑⊿情绪

文章 0 评论 0

天涯离梦残月幽梦

文章 0 评论 0

指尖微凉心微凉

文章 0 评论 0

☆獨立☆

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文