Html 调整大小时，两个带右div的水平div会滚动_Html_Css

Html 调整大小时，两个带右div的水平div会滚动

html css

Html 调整大小时，两个带右div的水平div会滚动,html,css,Html,Css,我想要两个水平的div。左div的宽度是200px，并且是固定的。默认情况下，右侧div的宽度为600px，应该是响应性的。如果用户调整浏览器的大小，右div的宽度可能会减小，并且滚动条会显示在右div上我正在尝试使用float和overflow来完成它。但我想不出正确的解决办法。我应该怎么做？使用display:table和display:table cell获得更好的结果 <div class="main"> <div class="left">sdf

我想要两个水平的div。左div的宽度是200px，并且是固定的。默认情况下，右侧div的宽度为600px，应该是响应性的。如果用户调整浏览器的大小，右div的宽度可能会减小，并且滚动条会显示在右div上

我正在尝试使用float和overflow来完成它。但我想不出正确的解决办法。

我应该怎么做？

使用

display:table

和

display:table cell

获得更好的结果

 <div class="main">
   <div class="left">sdfsf</div>
   <div class="right">sfsdfdsfsfdsfds</div>
 </div>

 .main{display:table; width:100%;}
 .left
 {
    display:table-cell;
    min-width:200px;
    width:200px;    
    border:1px solid red;
 }
.right
{
    display:table-cell;
    width:auto;
    border:1px solid green;
}


自卫队
SFSDFDSFDSFDS
.main{显示：表格；宽度：100%；}
左边
{
显示：表格单元格；
最小宽度：200px；
宽度：200px；
边框：1px纯红；
}
.对
{
显示：表格单元格；
宽度：自动；
边框：1px纯绿色；
}

仅仅因为我不喜欢

显示：表格

：

使用

flexbox

可以实现您想要的功能

其思想是使用

宽度：100%

设置

右

元素的宽度，使用

宽度：200px设置左
元素的宽度；最小宽度：200px

我不确定您关于溢出的意思，但我的解决方案将

right

元素的

overflow

设置为

scroll

，而contentn放在另一个

div

中，其

宽度为600px

这里有一个问题。
您的请求有点奇怪，虽然不幸的是不使用纯CSS级别1，但可以完成。为了使元素“float
”和第二个div
溢出而不是body
元素，您必须使用position
和overflow
的组合
将此复制到（x）html文件并调整浏览器大小
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>

<body style="overflow: hidden">

<div style="overflow: auto; max-width: 800px;">
<div style="background-color: #ff0; height: 200px; width: 200px; position: absolute; left: 0px; top: 0px;">left</div>

<div style="background-color: #0ff; height: 200px; overflow-x: auto; position: absolute; left: 200px; top: 0px; max-width: 600px;">
<div style="min-width: 800px;">right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, </div></div>
</div>

</body>
</html>


左边
对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，对孩子，

我强烈建议不要使用它，即使您的浏览器支持要求非常宽松，因为单独使用静态布局确实是IE6时代的一种“盒子中的盒子”式思维。如果是针对客户端，您确实需要强制覆盖它们。
请发布您的代码使用FIDLE显示一些代码块。这不是用户想要的，他们不希望正文溢出，他们希望右div溢出。Billy想要一个水平滚动条。将右div
的overflow
更新为overflow-x
，这也会起作用，尽管你已经将CSS提升到CSS级别3，所以它在技术上不太兼容，尽管OP没有提到任何浏览器要求。实际上，如果前缀正确，flexbox
将得到很好的支持。令人惊奇的是，这样做非常方便。您的答案在移动设备的屏幕上有正确的div溢出。