简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。
阿神
阿神 2017-04-11 11:05:16
0
9
730

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

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

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

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

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

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;
    }
}

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

阿神
阿神

闭关修行中......

全部回复(9)
左手右手慢动作
左手右手慢动作2017-04-11 11:07:16 9 楼

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

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

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

点赞 +0
添加回复
巴扎黑
巴扎黑2017-04-11 11:07:16 8 楼

仔细看了遍问题...再答；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>
点赞 +0
添加回复
刘奇
刘奇2017-04-11 11:07:16 7 楼

想到了一个完全能满足要求的方案，但是我相信一般人都不会这么做。就是把左边横线，中间文字，右边横线三个做成三个独立的无状态component，全部display:inline-block， vertical-alignment：top。然后设定中间文字的字号，比如1rem。之后render的时候计算文字长度length，那么就设定中间文字p（或者label）的宽度（考虑到中文比英文宽，我们优先满足中文宽度，如果怕不够，也可以设为每个文字1.1rem之类）为length x 1rem + （marginWidth x 2），然后左右两个横线的宽度就是 calc( 50% - (length x 0.5rem + marginWidth) )，并且使左右高度为中间高度的一半，再加上border-bottom就OK了

点赞 +0
添加回复
阿神
阿神2017-04-11 11:07:16 6 楼 
<!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>
    <p id="main_wrapper">
        <header>传统的实现方法</header>
        <p id="threecolwrap">
            <p id="twocolwrap">
                <!--left-->
                <nav><span>navnavnav</span></nav>
                <!--center-->
                <article>
              三栏中的右栏是210像素宽。为了给右栏特会给出空间，中栏的article元素有一个210像素的右外边距。当然，光有这个外边距只能把右栏再向右推210像素。但是，包围外栏和中栏的的两栏外包装上210像素的负右边距，会把右栏拉回article元素右外边距（在俩栏外包装内部右侧）创造的空间内，中栏article元素的宽度是auto，因此他仍然会力求占据浮动左侧剩余所有空间，可是，一方面，他自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右边距又把右栏拉回到该空间，总之，这个设计很巧妙
                </article>
            </p>
            <aside>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
                <span>asideaside</span>
            </aside>
        </p>
        <footer>footerffffffffffffffffffffffffffffffff</footer>
    </p>
    <p id="box-flex">
        <header>Header</header>
        <p id="page">
            <p id="main">
                <h1>主内容</h1>
                <p>这里所用的伸缩盒模型是最老的一个版本，而且IE并不支持，但是Edge支持，firefox由于本身对display:box的解析不同，所有的伸缩项都是按照内联伸缩项解析，所以显示也不对</p>
            </p>
            <p id="sidebar-left">
                <h1>左边栏</h1>
            </p>
            <p id="sidebar-right">
                <h1>右边栏</h1>
            </p>
        </p>
        <footer>页脚</footer>
    </p>
</body>
</html>
点赞 +0
添加回复
左手右手慢动作
左手右手慢动作2017-04-11 11:07:16 5 楼

如果不考虑背景可以这样

<!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>
点赞 +0
添加回复
Ty80
Ty802017-04-11 11:07:16 4 楼

不知有没有考虑过table table-cell的做法

http://codepen.io/dolymood/pen/JKKorq

点赞 +0
添加回复
洪涛
洪涛2017-04-11 11:07:16 3 楼

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

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

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;
}

效果：

点赞 +0
添加回复
左手右手慢动作
左手右手慢动作2017-04-11 11:07:16 2 楼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .containerp{
            width:500px;
            height:500px;
            background-color: #1A68A2;
            border: 1px solid #cccccc;
            font-size: 0px;
        }
        .leftp{
            width:10%;
            min-width: 10px;
            height:100%;
            background-color: grey;
            display: inline-block;

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

<p class="containerp">
    <p class="leftp"></p>
    <p class="centerp"></p>
    <p class="rightp"></p>
</p>
</body>
</html>
点赞 +0
添加回复
洪涛
洪涛2017-04-11 11:07:16 1 楼

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

<!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>
    <p class="middle">
        <p class="left">
            <img src="http://img2.3lian.com/2014/f5/32/119.jpg">
        </p>
        <p class="right">
            <p class="content">呵呵呵额呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
            <img src="http://tupian.qqjay.com/160x220/u/2015/0629/9_14495_1.jpg">
        </p>
    </p>
</body>
</html>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！