div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做相关的知识，希望对你有一定的参考价值。

你的意思是用表格？rowspan是上下合并单元格，也就是合并行，colspan是水平合并单元格，也就是合并列。
比如这样的一个表格，其实是第一行第一个表格，和第二行第一个表格的合并，在第一个td里写入rowspan，就可以了。 当然，也就相应的要删掉第二行第一个表格，也就是第二个tr里的一组td。第一行的两个表格合并，就用colspan。 看到这样一个表格，你就可以先确定是在三行两列的表格的基础上去实现，把你想要的效果先画出来，然后就知道需要几行几列了。
另外，这个并不是DIV+CSS布局啊，布局很少去用表格了，现在只是表单部分用表格方便点。 参考技术A DIV+CSS没办法像Table那样轻松的划分块。布局之前，必选先确定块，浮动的结构，不能任意的再拆分。你可以在Div内进行嵌套。

两列布局

两列布局 

效果：

 

4.1 左列定宽,右列自适应

(1)利用float+margin实现

html代码:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css代码:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大于等于#left的宽度*/
}

(2)利用float+margin(fix)实现 

html代码:

<body>
<div id="left">左列定宽</div>
<div id="right-fix">
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/
}
#right{
    margin-left: 100px; /*大于或等于#left的宽度*/
    background-color: #0f0;
    height: 500px;
}

(3)使用float+overflow实现 

html代码:

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css代码:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/
}

(4)使用table实现 

html代码:

<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>

css代码:

#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用单元格自动分配宽度*/
}

(5)使用绝对定位实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

(6)使用flex实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：*/
    background-color: #0f0;
}

4.2 左列自适应,右列定宽 

 

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent{
    height: 500px;
    padding-left: 100px;  /*抵消#left的margin-left以达到#parent水平居中*/
}
#left {
    width: 100%;
    height: 500px;
    float: left;
    margin-left: -100px; /*正值等于#right的宽度*/
    background-color: #f00;
}
#right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}

(2)使用float+overflow实现 

html代码:

<body>
<div id="parent">
    <div id="right">右列定宽</div>
    <div id="left">左列自适应</div>   <!--顺序要换一下-->
</div>
</body>

css代码:

#left {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #f00;
}
#right {
    margin-left: 10px;  /*margin需要定义在#right中*/
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;
}

(3)使用table实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent{
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    background-color: #f00;
    display: table-cell;
}
#right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
}

(4)使用绝对定位实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;  /*大于等于#rigth的宽度*/
    background-color: #f00;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;
}

(5)使用flex实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>

css代码:

#parent{
    height: 500px;
    display: flex;
}
#left {
    flex: 1;
    background-color: #f00;
}
#right {
    width: 100px;
    background-color: #0f0;
}

4.3 一列不定,一列自适应

(盒子宽度随着内容增加或减少发生变化,另一个盒子自适应)

(1)使用float+overflow实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#left {
    margin-right: 10px;
    float: left;  /*只设置浮动,不设宽度*/
    height: 500px;
    background-color: #f00;
}
#right {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;
}

(2)使用flex实现 

html代码:

<body>
<div id="parent">
    <div id="left">左列不定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

css代码:

#parent{
    display: flex;
}
#left { /*不设宽度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/
}

 

以上是关于div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做的主要内容，如果未能解决你的问题，请参考以下文章

div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

CSS+div三行两列布局

div+css三行两列布局怎么写，求大神解答

用div+css 制布局设计 三行 第二行分成两列 需要生成两个文件

div+css怎么显示两行或三行文字，然后多出的部分省略号代替？？