两列布局 - 如果左侧列宽度太小，则将右侧列移至下一行

Question

两列布局 - 如果左侧列宽度太小，则将右侧列移至下一行

3

我有一个包装器和两个元素：左侧div和右侧div。左侧div仅包含可能非常长的文本。右侧div包含异步加载的图像，我们不知道其宽度：

<div id="wrapper">
    <div id="left">TEXT TEXT TEXT TEXT</div>
    <div id="right">IMAGE</div>
</div>

我希望以如下方式显示所有内容：

+-----------------------------+
|                             | 
|  #wrapper                   |
|                             | 
|  +----------+  +--------+   |
|  |          |  |        |   |
|  | #left    |  | #right |   |
|  |          |  |        |   |
|  +----------+  +--------+   |
|                             |
+-----------------------------+

为此，我准备了以下 CSS：

#wrapper{
    width: 600px;
    display: inline-block;
}
#left{
    float: left;
    width: 400px;
}
#right{
    float: left;
    width: 200px;
}

现在我想为这个布局添加一些响应式。左侧div的最小宽度应为200px，因此如果右侧的图像宽度大于400px，则应跳到下一行，并以以下方式将左侧div扩展到包装器的100％： + -----------------------------+ | |＃wrapper | | | | | + ----------------------+ | | | | | | |＃left | | | | | | | + ----------------------+ | | | | +--------------+ | | | | | | |＃right | | | | | | | +--------------+ | | | + -----------------------------+

没有使用JavaScript，如何实现这一点？

我找到了这个解决方案：http://jsfiddle.net/fxWg7/1865/，唯一的区别是当左侧div太小时，右侧div应该跳到下一行而不是左侧div。

应该像这样：

#left.width = #wrapper.width - #right.width;
if (#left.width < 200px) {
  #left.width = 100%;
  #right move to new line;
} else {
  display #left div on left side and #right div next to #left div
}

- Temp

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akshay · Answer 1

我在你两个 div 标签中添加了 float:left，请参见http://jsfiddle.net/fxWg7/1866/

#wrapper {
height: auto;
overflow: hidden;
}

#right {
width: auto;
float: right;
background: #aafed6;
}

#left {
float: left; 
background: #e8f6fe;
width: auto;
overflow: hidden;
min-width: 200px;
max-width:300px;
}

- Eric Njanga · Answer 2

我创建了一个带有一些高亮显示的CSS来回答你在这里的问题：http://jsfiddle.net/ericnjanga/kexn9ys6/。请告诉我它是否对你有用。

/* Mobile first:
1) We apply no widths to  #wrapper, #left and #right, 
they are divs and span 100% naturally.
2) The #left which has a higher position in the DOM will naturally be on top
*/
#wrapper{
overflow: auto; /*helps contains floating children*/
}
#left{}
#right{}


/*
Mobile viewport only: We apply a "max-width: 100%" to "#right img" in order to maintain 
its natural width as long as the layout is wider but, to make it fit 
if the layout gets smaller */
@media (max-width: 599px) {  
#right img{
/* maintain img natural width as long as the layout is wider but
spans 100% when the layout gets smaller */
max-width : 100%;
}
}


/* Higher viewports:
After that breaking point, set the wrapper width and make sure the right image scales up and down with the layout */
@media (min-width: 600px) {
#wrapper{
margin: 0 auto; /* centers all elements on the page */
width: 600px;
}

/* It is better to set #left and #right widths in % */
#left{
float: left;
width: 60%; 
}
#right{
float: left;
width: 40%; 
}
#right img{ 
width: 100%;
height: inherit;
}
}