当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to control which elements will change width more than other? Mixing fluid with static containers inline

问题描述:

I am creating a fluid design where I need to place 4 inline fields. First 3 fields will be 20% width each and the 4th will be 40% and/or minimum of 280px or so and will be split into 2 separate fields. This is because 280px field will contain a background image split into separate buttons.

Now, since I am using percentage on all fields and the last field has a static minimum width, it is being moved to next line when coming close to 600px parent width.

How can I assure my elements stay in place and force first 3 elements to compress more than the last one?

Or how to leave last field with fixed width and stretch the first 3?

jsFiddle link

<div style="width: 100%; height: 50px;">

<div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">a</div>

<div style="width: 20%; height: 100%; float: left; background-color: green; display: block">b</div>

<div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">c</div>

<div style="width: 40%; min-width: 280px; height: 100%; float: left; display: block;">

<div style="width: 50%; height: 100%; float: left; background-color: yellow;">d</div>

<div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>

</div>

</div>

网友答案:

This is a perfect scenario for flexbox. Here's my take on it: http://jsfiddle.net/7QUY9/3/. Make sure that you are using a browser that supports flexbox or just use the latest version of Chrome.

In my book "Functional CSS," which is available for free on amazon for the next 1.5 days, I consider a lot more of flexbox in the last case: navigation menu. You are welcome to check it out if you want.

Make sure to resize the jsfiddle preview window to see the flexbox in action. Great spec.

Here's HTML code:

<div id = "main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>
        <div>4a</div>
        <div>4b</div>
    </div>
</div>

And here's CSS:

#main {
    height: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(-n + 3) {
    -webkit-flex: 1 1 140px;
    flex: 1 1 140px;
    outline: 1px dashed red;
}

#main > div:nth-of-type(4) {
    -webkit-flex: 2 0 280px;
    flex: 2 0 280px;
    outline: 1px dashed red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(4) > div {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
    outline: 1px dotted blue;
}
网友答案:

Well, did some googling meanwhile I was scratching my head and came to this solution.

Here's jsFiddle

But is this cross browser compatible and supported in browsers couple generations older?

<div style="width: 100%; height: 50px;">
    <div style="width: 100%; height: 100%; float: left; margin-right: -280px; padding-right: 269px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
        <div style="width: 33%; height: 100%; float: left; background-color: blue;">a</div>
        <div style="width: 33%; height: 100%; float: left; background-color: green;">b</div>
        <div style="width: 33%; height: 100%; float: left; background-color: blue;">c</div>
    </div>
    <div style="width: 280px; height: 100%; float: right; display: block;">
        <div style="width: 50%; height: 100%; float: left; background-color: red;">d</div>
        <div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>
    </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: