我正在做一个相当简单的响应网站。我有一个logo div,它将logo集中在小屏幕上,左边是大屏幕。一切都按我的要求工作(尝试调整jsfiddle的大小),除了我希望logo div在链接换行前缩小到最小宽度。我不知道该怎么说,但我希望logo div的大小取决于链接是否在推动它(如果它们有足够的空间)。当它达到最小宽度时,链接应该换行。不确定这是否可能,但我想我还是会问的。
Here is the jsfiddle
HTML:

<div class="header">
  <div class="logo">logo</div>
  <div class="link">link one</div>
  <div class="link">link two</div>
  <div class="link">link three</div>
</div>

CSS:
.header {
    text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
    max-width: 300px;
    min-width: 100px;
    width: 100%; /* It is always the min-width without this*/
    background-color: red;
    display: inline-block;
    float: left;
}
.link {
    display: inline-block;
    background-color: green;
}

我希望我明白了,我还在学习。如果我需要更多的细节请告诉我。

最佳答案

我又去看了一些,发现了Flexbox。让他们做我想做的事。
http://jsfiddle.net/3525C/10/
我的新HTML:

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">
        <div class="link">link one</div>
        <div class="link">link two</div>
        <div class="link">link three</div>
    </div>
</div>

和css:
.header {
    text-align: center;
    display: flex;
    flex-flow: row wrap;
}
.logo {
    flex: 1 0 auto;
    min-width: 100px;
    background-color: red;
}
.nav {
    flex: 1 1 auto;
    background-color: lightgray;
    text-align: center;
}
.link {
    display: inline-block;
    background-color: green;
}

谢谢hexalys for helping me get it working

07-24 09:47
查看更多