长青道长 2015-09-30 07:29 采纳率: 0%
浏览 4921

一个div内含三个div,内部三个div向左浮动,最后一个自适应大小

在页面body里有一main层div,里面有三块div:left,Middle,right;全部向左浮动,最左边两个left,Middle,固定宽度,让最后一个div自适应剩余的空间,理想图如图:图片说明
而我现实出现成这样,如图最右边的只有一小块,不知道怎么设置成充满,而且,由于屏幕的分辨率会变,最右边的还容易跑到最下边去,如图:图片说明
求各位大神指导....

  • 写回答

8条回答 默认 最新

  • wsm443 2015-09-30 07:43
    关注

    可以用jQuery计算吗？

    评论

报告相同问题？

  • 绝对定位的DIV宽度自动适应的一个方法
    2020-10-31 03:50
    为了解决在IE6中的显示问题，作者尝试在`<div>`内部添加了一个`<hr/>`标签。虽然这种方法使得`<div>`在IE6中正确显示，但`<hr/>`在页面上的可见性并不是所期望的。代码如下： ```html <div style="position:...
  • 让多个div在同一行显示的样式及html代码
    2020-09-25 06:37
    接着，文档展示了相应的HTML代码，其中包含了一个包裹div元素的容器（`<div id="pid">`），以及三个设置了`.custom_div`类的子div元素。`<div id="pid">`并没有指定宽度，这意味着它会尝试自适应其内容的宽度。由于...
  • 相邻div实现一个跟着另一个自适应高度示例代码
    2020-09-25 07:18
    在网页布局设计中，相邻`div`...总之，相邻`div`实现一个跟着另一个自适应高度的代码示例展示了传统CSS布局的一种解决方案。虽然现在有更先进的布局技术，但了解和理解这种经典方法对于深入掌握CSS布局仍然是有益的。
  • div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
    2020-09-25 06:05
    总的来说，通过合理设置 `li`、`ul` 和 `div` 的高度属性，以及使用 `clear:both` 解决浮动问题，我们可以实现 `div` 高度自适应 `li` 的功能。当在 `ul` 中添加更多 `li` 时，这个结构会自动扩展其高度以适应新的...
  • html三个div相同高度,两个DIV高度自适应方法(左右两个DIV高度一样)
    2021-06-13 11:18
    weixin_39612220的博客 利用的table本身的自适应特性，兼容性好，容易使用#container{width:500px;display:table;}#leftSide,#rightSide{display:table-cell;}#leftSide{width:80%;background:blue;}#rightSide{width:2...
  • HTML如何在两个div标签中间画一条竖线
    2020-09-28 04:23
    首先，我们创建一个包含三个子div的父div，分别命名为`.leftdiv`、`.centerdiv`和`.rightdiv`。`.leftdiv`和`.rightdiv`分别代表两个主要的div区域，它们会根据内容自动调整高度。`.centerdiv`则用来绘制竖线，它的...
  • 浮动的div自适应居中显示的js代码
    2020-10-26 12:35
    当元素被设置为浮动后，它会向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘为止。然而，浮动元素不会自动调整大小以适应其容器的宽度，因此在响应式设计中，单独使用浮动有时难以实现灵活的布局...
  • flex布局实现叠在另一个div之上_Web前端（三）：前端布局
    2021-01-02 16:59
    沈长山的博客 我所理解的前端布局可以分成两个大类，第一类是元素层面的布局，就是像absolute布局、flex布局等等，都是描述元素在页面上以何种形式呈现，即局部的布局；第二类是网页层面的布局，像静态布局、响应式布局等，都是...
  • 2个div一个定宽一个自适应
    2022-04-15 17:54
    因起名而头秃的博客 第一种 .div-box1 { width: 100%;...//只需要第一个div进行浮动 } .div2 { height: 100px; background-color: green; } 第二种 .div-box2 { width: 100%; position: relative; } .div3 { position: ab
  • DIV CSS：网页一行两列背景自适应
    2020-12-10 21:02
    【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
  • 没有解决我的问题, 去提问