如何使两个div（一个带文本，一个带图片）响应？
我有一个简单的网页，两个div并排。一个包含文本，另一个包含整个右分区的图像。
<div id="left_column">
<a href="index.html" id="logo">
<h1 class="headings">The 100 Days Project</h1>
<h2 class="headings">Illustrations and love</h2>
<nav>
<ul>
<li><a href="new_treehouse.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="footer">
<a href="http://twitter.com/cilvako"><img src=http://placekitten.com/g/200/300 alt="Twitter Logo" class="social_icon"></a>
<a href="http://facebook.com/"><img src=http://placekitten.com/g/200/300 alt="Facebook Logo" class="social_icon"></a>
<p>© 2016 Silvia Bogdan</p>
</div>
</div>
<div id="right_column">
<img src="http://placekitten.com/g/200/300" width="495px" height="593px">
</div>
完整的代码在这里https://jsfiddle.net/Cilvako/fz97emmz/当我调整浏览器大小时，图像div会调整大小，但文本div不会发生任何变化。我怎样才能让两者都有反应？我应该将两者都包装在容器div中吗？谢谢你！
共有2个答案
更改div标记的最小宽度（minwidth）并删除css中的最小高度（可选）。
测验html
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="left_column">
<a href="index.html" id="logo">
<h1 class="headings">The 100 Days Project</h1>
<h2 class="headings">Illustrations and love</h2>
<nav>
<ul>
<li><a href="new_treehouse.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="footer">
<a href="http://twitter.com/cilvako"><img src=http://placekitten.com/g/200/300 alt="Twitter Logo" class="social_icon"></a>
<a href="http://facebook.com/"><img src=http://placekitten.com/g/200/300 alt="Facebook Logo" class="social_icon"></a>
<p>© 2016 Silvia Bogdan</p>
</div>
</div>
<div id="right_column">
<img src="http://placekitten.com/g/200/300" width="495px" height="593px">
</div>
</body>
</html>
css.css
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
/*-------------- LEFT COLUMN -----------------------*/
a {
text-decoration: none;
color: black;
}
#left_column {
width: 50%;
float: left;
min-width: 300px; /* Change here */
color: black;
padding-left: 1.875rem;
}
#left_column h1 {
font-family: 'Frijole', cursive;
font-size: 2rem;
color: orange;
margin-bottom: 0;
margin-top: 2rem;
}
#left_column h2{
margin-top: 0;
font-size: 1.15rem;
}
#left_column ul {
list-style-type: none;
padding-top: 7.25rem;
padding-left: 0;
}
#left_column ul li {
font-family: 'Frijole', cursive;
line-height: 2.1875rem;
}
/*-------------- RIGHT COLUMN -----------------------*/
#right_column {
width: 50%;
float: left; /* Change here */
}
#right_column img {
width:100%;
height:auto;
}
/*-------------- FOOTER -----------------------*/
#footer {
padding-top: 22.5rem;
color: orange;
}
#footer p {
margin-top: 0.3215rem;
}
.social_icon {
display: inline;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.3215rem;
margin-bottom: 0;
}
要创建响应性页面设计，您可以使用以下方法：
1） 编写您自己的自定义媒体查询。-媒体查询是我们为处理不同屏幕大小而编写的css属性。
例如：标准显示器分辨率为1280 x 720，因此要处理该分辨率，您必须以这种方式编写媒体查询。
@media screen and (min-width: 720px) and (max-width: 1280px) {
// Add your css classes here
}
- 您必须为不同的屏幕大小编写多个媒体查询
2）使用已经流行的css框架，如bootstrap，zurb等。
- 使用已经建立的css框架，您编写媒体查询的工作将会容易得多。所有你必须使用它的css类的框架。
请参阅引导程序：http://www.w3schools.com/bootstrap/default.asp
请检查下面的代码以获取您的答案。我已经展示了它使用引导。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-6" style="background-color:pink;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPbpweYyc1mQOwkCQYsUmWUeRAo00tmYNzx7RfCynUzJhBEZb-">
</div>
</div>
</div>
</body>
</html>-
各位早上好，我正在创建一个产品销售系统，这个话题会有点长，因为我想好好解释一下。 正在用Vaadin+MySQL+springboot+Maven开发的系统 在主屏幕上，我们有一个网格，上面有“新建”、“更改”和“删除”按钮： 当点击new按钮时，将打开一个窗口，开始“销售”产品： 这里的问题是这样的，当我点击“+项”时会出现以下情况： 问题：创建了一个滚动条（在窗口的右边），保存、关闭和+项按钮
-
本文向大家介绍如果同时定义了两个函数，一个带const，一个不带，会有问题吗？相关面试题，主要包含被问及如果同时定义了两个函数，一个带const，一个不带，会有问题吗？时的应答技巧和注意事项，需要的朋友参考一下 不会，这相当于函数的重载。
-
问题内容： 在将一个人叠加到另一个人上时，我需要帮助。 我的代码如下所示： 不幸的是，我不能将或嵌套在第一个内部。 如图所示，它必须是两个单独的，但是我需要知道如何将放置在上方和最右侧，并以的顶部为中心。 问题答案： 我建议使用来了解和子元素。
-
问题内容： 我有两个div容器。 尽管一个需要为特定宽度，但我需要对其进行调整，以便另一个div占用其余空间。有什么办法可以做到吗？ 问题答案： 请参阅： http ： //jsfiddle.net/SpSjL/ （调整浏览器的宽度） HTML： CSS： 您也可以使用这样做，这通常是一种更好的方法：如何将输入元素与其标签放在同一行？
-
给定一个加权无向图和一组节点。 给定两个节点和。 我想找到从到的两条单独的（不重叠的）路径，使两条路径的权重之和最小。我将这个问题解释为标题所描述的，即包含和的最小加权循环。 显然，从到找到第一条最小加权路径然后从图中去掉p1中的边，然后找到第二条最小加权路径是不正确的。 我怎么才能找到这样的循环呢？