我正在做一个相当简单的响应网站。我有一个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。