如何使div动态变化到内容宽度，并保持宽度，即使浏览器窗口更改大小？

问题描述

第一次在这里张贴。

我花了两天时间想出这一点，最后决定在这里问。

看看这个:(情景1）

  #container {
 height：150px ; 
 border：1px solid pink; 
 width：1100px; 
} 
 #widget {
 display：inline-block; 
 width：100px; 
 height：100px; 
 background-color：red; 
} 
  

很简单。一个div里面有一堆其他div。父div具有约1000像素的固定宽度，子div设置为显示：inline-block;当您使浏览器窗口小于父级时，会出现一个滚动条，您可以滚动查看其余部分。

现在看看这里：（场景2）

  #container {
 height：150px; 
 border：1px solid pink; 
 float：left; 
} 
 #widget {
 display：inline-block; 
 width：100px; 
 height：100px; 
 background-color：red; 
} 
  

相同的父级和子级，但父级的宽度由div的数量动态确定你放在它的孩子。这是dandy。但是，当你使浏览器窗口变小时，父div变得和窗口一样宽，孩子们开始环绕，使父母变得更高（即使我们设置了一个固定的高度！）

SO：

如何使父div的BOTH动态宽度如情形2，但随后也保持其形状/高度/浏览器窗口变小，所以我们可以得到滚动条？

解决方案

最小宽度是要走的路：

  #container {
 height：150px; 
 border：1px solid pink; 
 min-width：1100px; //将容器的最小宽度设置为1100px 
 width：100％; //如果窗口大小大于1100px，那么使容器跨越整个窗口
} 
  

查看实际范例

编辑

一个简单的方法是使用 white-space 属性，如下所示：

  #container {
 border：1px solid pink; 
 white-space：nowrap; 
} 
 #widget {
 display：inline-block; 
 width：100px; 
 height：100px; 
 background-color：red; 
} 
  

查看实时示例

first time posting here.

I've spent two days trying to figure this out, finally decided to ask here.

Take a look at this: (Scenario 1)

#container {
    height:150px;
    border:1px solid pink;
    width:1100px;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

http://jsfiddle.net/DQFja/1/

Very simple. A div with a bunch of other divs within it. Parent div has a fixed width of ~1000 pixels, children divs are set to display:inline-block; When you make the browser window smaller than the parent, a scroll bar appears and you can scroll to see the rest.

Now take a look at this: (Scenario 2)

#container {
    height:150px;
    border:1px solid pink;
    float:left;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

http://jsfiddle.net/zZRq7/

Same parent and children, but the width of the parent is dynamically determined by the number of div children you place in it. Which is dandy. However, when you make the browser window smaller, the parent div becomes as wide as the window and the children start wrapping around, making the parent taller (Even though we set a fixed height!)

SO:

How do I make the parent div BOTH dynamic in width as in scenario 2, but then also keep its shape/height/width when the browser window gets smaller so we can get a scrollbar?

解决方案

Min-width is the way to go:

#container {
    height:150px;
    border:1px solid pink;
    min-width:1100px; // set the minimum width of the container to 1100px
    width: 100%; // if the window size is bigger than 1100px, then make the container span the entire window
}

See a live example here

EDIT

A hacky way to achieve is using the white-space property as follows:

#container {
    border:1px solid pink;
    white-space: nowrap;
}
#widget {
    display: inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

See a live example here

这篇关于如何使div动态变化到内容宽度，并保持宽度，即使浏览器窗口更改大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！