1

我正在尝试为我正在开发的网站创建一个流畅的元素，看看这个 JS fiddle 并让你的浏览器更宽一些，你会看到一条灰线，一个黑框，然后是一条灰线。

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

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

http://jsfiddle.net/r8Xka/

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>
4

1 回答 1

0

You have 3 column: left - fluid, middle - fixed, right - fluid. You would need some js to make it work.

Or some html/css trick like this:

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

See working fiddle

于 2013-08-28T17:34:44.357 回答