Question

我正在尝试为我正在处理的网站创建一个流畅的元素，看看这个JS小提琴，让你的浏览器更宽一些，你会看到一条灰线，一个黑盒子，然后一条灰线。

当浏览器的宽度较低时，右侧线会分解到下一行，但无论浏览器有多宽，我都希望它保持在一起。我通常使用浮点数，但尝试了一些东西，因为你可以看到一些css被注释掉因为我正在玩它。

有人有一些很酷的技巧可以告诉我吗？任何帮助将不胜感激！如果您需要任何信息，请告诉我。

CSS

header .lower{
    overflow:hidden;
    width:95%;
    margin:40px auto 0 auto;
}
header .lower .line{
    /*float:left;*/
    display:inline-block;
    background:#eaebeb;
    width:35%;
    height:8px;
    /*display:block;*/
    position:relative;
    top:18px;
}
header .lower a{
    /*float:left;*/
    display:inline-block;
    margin:0 20px;
    /*display:block;*/
    background: #000;
    width: 141px;
    height: 42px;
}

HTML

<header data-behavior="randomHeader">           
  <div class="lower">
    <div class="line"></div>
    <a href="" title="Play Video" class="btn-play_video" data-behavior="video">Play Video</a>
    <div class="line"></div>
  </div>
</header>

Answer 1

你有3列：左 - 流体，中间 - 固定，右 - 流体。你需要一些j来使它工作。

或者像这样的一些html / css技巧：

<header data-behavior="randomHeader">           
        <div class="lower">
            <div class="line"></div>
            <div class="center">
                <a href="" title="Play Video" class="btn-play_video" data-behavior="video">Play Video</a>
            </div>          
        </div>
</header>

Css：

header .lower{
    width:95%;
    margin:40px auto 0 auto;
    position: relative;
}
header .lower .line{
    background:#eaebeb;
    height:8px;
}
.center{
    text-align: center;
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
}
header .lower a{
    border: 10px solid #FFF;
    display:inline-block;
    background: #000;
    width: 141px;
    height: 42px;
}

见工作fiddle

流体css浮动

1 个答案: