Community Learn Tools Library Leisure
search
English
javascript - 有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。
阿神
阿神 2017-04-11 11:05:16
0
9
778

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

中间的内容可以是 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;
    }
}

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

阿神
阿神

闭关修行中......

reply all(9)
左手右手慢动作
左手右手慢动作2017-04-11 11:07:16 9 floor

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

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

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

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-11 11:07:16 8 floor

仔细看了遍问题...再答；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>
Like +0
Add Reply
刘奇
刘奇2017-04-11 11:07:16 7 floor

想到了一个完全能满足要求的方案，但是我相信一般人都不会这么做。就是把左边横线，中间文字，右边横线三个做成三个独立的无状态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了

Like +0
Add Reply
阿神
阿神2017-04-11 11:07:16 6 floor 
<!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>
Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-11 11:07:16 5 floor

如果不考虑背景可以这样

<!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>
Like +0
Add Reply
Ty80
Ty802017-04-11 11:07:16 4 floor

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

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

Like +0
Add Reply
洪涛
洪涛2017-04-11 11:07:16 3 floor

之前一个移动端页面做过类似需求
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;
}

效果：

Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-11 11:07:16 2 floor 
<!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>
Like +0
Add Reply
洪涛
洪涛2017-04-11 11:07:16 1 floor

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

<!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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template