Question

我正在建立一个相当简单的响应式网站。我有一个徽标div，可以将徽标放在小屏幕上，左侧放在大屏幕上。一切都按照我想要的方式工作，（尝试调整jsfiddle的大小），除了我希望logo链接缩小到它的最小宽度之前链接换行到下一行。我不知道怎么说这个，但我希望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;
}

我希望我很清楚，我还在学习。如果我需要添加更多详细信息，请与我们联系。

Answer 1

我去看了一些，发现了flexboxes。让他们做我想做的事。

<强> 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。

Answer 2

唯一可以回应你说话的方式就是桌子。表格单元具有宽度灵活的能力。

您可以使用CSS来实现这一目标。这是一个更现代的display，所以并非所有的浏览器（看着你，旧的IE）都会支持它。但这应该让你开始：http://jsfiddle.net/mfvf8/

以下是我作为概念证明添加的内容：

.header
{
    display: table;
    width: 100%;
}

.header > div
{
    display: table-cell;
}

.header .link
{
    white-space: nowrap;
    width: 1px;
}

我将标题设置为一个表格，并给它全宽。我让所有的孩子们都像桌子一样行动起来。我将链接设置为最小宽度（1px），并表示不要包装空格。使用常规div，会溢出。对于表格单元格，这意味着它尝试为1px宽，但会扩展以适应其内容。

表格行的宽度的其余部分将均匀地分配给没有设置宽度的剩余单元格。在这种情况下，它是徽标div。然后，当您缩小窗口时，它将根据需要慢慢开始缩小徽标。

您需要调整它以更好地适应您的设计。如果您不希望导航器一直向右推，就像它在jsfiddle中一样，您可能需要一个最右边的“缓冲区”div，或者不同的宽度设置，或者需要一个max-width的集合。标题div。

在下一个元素换行之前，将元素缩小到最小宽度

2 个答案: