有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。

发布于
2016-06-14

希望得到大家的帮助~
需要实现一个这样的效果：

中间的内容可以是 React 组件，可以是文字等任意的东西，提前不知道它的宽度值。
两边的线等长，随着中间的内容增加或者减少进行改变，但是和中间的文字总是保持一定的间隔。

总结起来就是三列布局，中间内容不定宽，两边内容等宽，且可以自适应中间内容宽度的变化。

目前自己可以实现中间内容定宽的情况，但是不定宽的情况却做不出来，希望大家提供一些思路，感谢大家。

<div class="horizontalLineWithContent">
    <span class="horizontalFirstAdditionalLayer"></div>
    "AND"
    <span class="horizontalFirstAdditionalLayer"></div>
<div>

html 部分考虑到 React 无法操作伪元素，所以将伪元素换成了 span 标签

.horizontalLineWithContent {
    position: relative;
    margin: 1em auto;
    text-align: center;
    color: #eee;
    .horizontalFirstAdditionalLayer, .horizontalSecondAdditionalLayer{
        position: absolute;
        border-top: 1px solid #eee;
        top: 50%;
    }
    .horizontalFirstAdditionalLayer {
        left: 0;
    }
    .horizontalSecondAdditionalLayer {
        right: 0;
    }
}

希望大家多多提供思路，多谢各位啦~~

css javascript

html5 html

阅读 6k

9 个回答

imfeng

✓ 已被采纳

有考虑and背景因素吗？
如果不考虑背景的话可以这样做：

<body style="
    text-align: center;
    border-top: 1px solid;
"><span style="
    position: relative;
    top: -10px;
    background: white;
    padding: 0 10px;
">and</span></body>

当然这只是方法之一，其它方法还有的，我再想想再来

golden_freeman_china

1.8k1211

发布于
2016-06-15

更新于
2016-06-15

仔细看了遍问题...再答；po一个自己项目里面的：

<html>
<head></head>
<style>
    body{
        margin:0;
        background-color: #fff;
    }
    .sp_style_1{
        display: block;
        height:1rem;
        line-height: 1rem;
        font-size:1rem;
        color:#333;
        text-align: center;
        position: relative;
    }
    .sp_style_1:before,.sp_style_1:after{
        display: block;
        content:"";
        border-bottom:2px solid #ccc;
        position: absolute;
        height:.5rem;
        top:0;
        width:40%;
    }
    .sp_style_1:before{
        left:0;
    }
    .sp_style_1:after{
        right:0;
    }

    .sp_style_2{
        display: block;
        height:1rem;
        line-height: 1rem;
        font-size:1rem;
        color:#333;
        text-align: center;
        position: relative;
    }
    .sp_style_2:before{
        display: block;
        content:"";
        height:.5rem;
        border-bottom:1px solid #CCC;
        width:100%;
        position: absolute;
        z-index:0;
    }
    .sp_style_2 a{
        display: block;
        position: absolute;
        left:0;
        right:0;
        margin:auto;
        min-width:2rem;
        max-width:20rem;
        z-index:2;
        background-color: #FFF;
        padding:0 1rem;
    }
</style>
<body>
    <span class="sp_style_1">或者您还可以</span>
    <p></p><p></p><p></p>
    <span class="sp_style_2"><a>或者您还可以</a></span>
</body>
</html>

枫s的思念

2.4k102639

发布于
2016-06-15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏固定流动布局</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #main_wrapper{

            /*min-width:600px;*/
            /*max-width:100%;*/
            margin:0 auto;
            width:100%;
        }
        header{
            padding:5px 10px;
            background-color: #0d70b7;
            color: #fff;
            text-align: center;
        }
        #threecolwrap{
            float: left;
            width:100%;
            background-color: #1ab394;
        }
        #twocolwrap{
            float: left;
            width:100%;
            margin-right: -210px;
        }
        nav{
            float: left;
            width:150px;
            background-color: #8a1f11;
            padding:20px 0;
            height:500px;
        }
        nav>*{
            margin:0 10px;
        }
        article{
            width:auto;
            margin-left: 150px;
            margin-right: 210px;
            background-color: #eee;
            padding:20px 0;
            height:500px;
        }
        article>*{
            margin:0 10px;
        }
        footer{
            clear: both;
            width:100%;
            text-align: center;
            background-color: #000000;
            color: #fff;
            margin-bottom: 30px;
        }
        /*box-flex
          其中box-flex设置伸缩项在伸缩容器中的所占比例，box-ordinal-group设置显示顺序，值越大越靠后
        */
        #page{
            display: box;
            display: -webkit-box;
            display: -moz-box;
        }
        #main{
            padding:10px;
            background-color: #00ada0;
            -webkit-box-flex: 10;
            -moz-box-flex: 10;
            -ms-box-flex: 10;
            box-flex: 10;
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -ms-box-ordinal-group: 2;
            box-ordinal-group: 2;
        }
        #sidebar-right,
        #sidebar-left{
            width:220px;
            padding:10px;
            background-color: #0a6aa1;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-box-flex: 1;
            box-flex: 1;
        }
        #sidebar-right{
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
            -ms-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
    </style>
</head>
<body>
    <div id="main_wrapper">
        <header>传统的实现方法</header>
        <div id="threecolwrap">
            <div id="twocolwrap">
                <!--left-->
                <nav><span>navnavnav</span></nav>
                <!--center-->
                <article>
              三栏中的右栏是210像素宽。为了给右栏特会给出空间，中栏的article元素有一个210像素的右外边距。当然，光有这个外边距只能把右栏再向右推210像素。但是，包围外栏和中栏的的两栏外包装上210像素的负右边距，会把右栏拉回article元素右外边距（在俩栏外包装内部右侧）创造的空间内，中栏article元素的宽度是auto，因此他仍然会力求占据浮动左侧剩余所有空间，可是，一方面，他自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右边距又把右栏拉回到该空间，总之，这个设计很巧妙
                </article>
            </div>
            <aside>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
            </aside>
        </div>
        <footer>footerffffffffffffffffffffffffffffffff</footer>
    </div>
    <div id="box-flex">
        <header>Header</header>
        <div id="page">
            <div id="main">
                <h1>主内容</h1>
                <p>这里所用的伸缩盒模型是最老的一个版本，而且IE并不支持，但是Edge支持，firefox由于本身对display:box的解析不同，所有的伸缩项都是按照内联伸缩项解析，所以显示也不对</p>
            </div>
            <div id="sidebar-left">
                <h1>左边栏</h1>
            </div>
            <div id="sidebar-right">
                <h1>右边栏</h1>
            </div>
        </div>
        <footer>页脚</footer>
    </div>
</body>
</html>

prototype_eva

1.1k23657

发布于
2016-06-15

如果不考虑背景可以这样

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
*{padding:0; margin:0; list-style:none;}
.h3_title{ border-bottom:1px solid #666; text-align:center; height:20px; margin-bottom:20px;
line-height:40px; font-size:16px;}
.h3_title span{ display:inline-block; padding:0 10px; background:#fff;}
</style>
<body>

<h3 class="h3_title">
  <span>其他方式</span>
</h3>
</body>
</html>

matelo

发布于
2016-06-15

新手上路，请多包涵

之前一个移动端页面做过类似需求
html:

<div class="title">
    <div class="cross-line"></div>
    <span>云南.丽江</span>
</div>

css:

.title{
    height: 0.27rem;
    line-height: 0.27rem;    
    font-size: 0.24rem;
    position: relative;
    text-align: center;
}
.title .cross-line{
    width: 100%;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.title span{
    z-index: 10;
    display: inline-block;
    height: 0.27rem;
    background: #6daffc;
    position: relative;
    padding: 0 0.1rem;
}

效果：
图片描述

kikong

19.1k31320

发布于
2016-06-15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .containerDiv{
            width:500px;
            height:500px;
            background-color: #1A68A2;
            border: 1px solid #cccccc;
            font-size: 0px;
        }
        .leftDiv{
            width:10%;
            min-width: 10px;
            height:100%;
            background-color: grey;
            display: inline-block;

        }
        .rightDiv{
            display: inline-block;
            width:10%;
            min-width: 10px;
            height:100%;
            background-color: grey;
        }
        .centerDiv{
            width:80%;
            height:100%;
            background-color: #1e83c9;
            display: inline-block;
        }
    </style>
</head>
<body>

<div class="containerDiv">
    <div class="leftDiv"></div>
    <div class="centerDiv"></div>
    <div class="rightDiv"></div>
</div>
</body>
</html>

查看全部 9 个回答

malushashou

发布于
2016-10-28

更新于
2016-10-28

新手上路，请多包涵

不知道能不能满足需求，自己写了一个两列不定宽，中间自适应的，欢迎拍砖

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style type="text/css">
        .right {
            display: flex;
            float: right;
            width: 100%;
        }
        .middle {
            display: flex;
        }
        .content {
            margin-right: auto;
        }
        img {
            display: block;
        }
    </style>
</head>
<body>
    <div class="middle">
        <div class="left">
            <img src="http://img2.3lian.com/2014/f5/32/119.jpg">
        </div>
        <div class="right">
            <div class="content">呵呵呵额呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
            <img src="http://tupian.qqjay.com/160x220/u/2015/0629/9_14495_1.jpg">
        </div>
    </div>
</body>
</html>

推荐问题

有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？