Question

几年前的question was asked，如果元素的宽度大于屏幕宽度，则其他块元素（h1等）不会扩展以匹配（see fiddle从而宽元素出现后，h1宽度不会改变）：

＆＃13;

function addElement(){
    $("#para").after('<div class="wide">Wide</div>');
    $("a").fadeOut();
    // $("h1").width($(".wide").width()); // <-- trying to avoid needing this
}

＆＃13;

body {margin:0; padding:0}
h1 {background-color:#eee}
.wide {background-color:#00c; color:#fff; width:110%; margin-top:1em; margin-bottom:1em}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

＆＃13;

虽然最初的答案确实有效，但现在CSS3更为主流，我想知道是否有更聪明的方法来实现目标，而不使用JQuery手动调整大小？例如，是否有纯CSS解决方案？我事先并不知道元素的宽度（它是ERP系统的数据表，有时可能非常宽）。

如果没有，我很乐意删除这个问题，但是无法想出一种方法来引起人们对旧问题的关注，现在可能会有更好的解决方案。

Answer 1

我认为您想要的是设置.wide父对象的宽度，并让该父对象的子对象影响其所有子对象的宽度。

我决定更改它，而不是你的新元素有wide类，我将该类提供给它的父级（在这种情况下为body）因为css没有父级选择器，所以这似乎是最简单的解决方案。

＆＃13;

function addElement(){
    $("#para").after('<div class="foo">Wide</div>'); // <-- updated
    $("a").fadeOut();
    $("body").addClass("wide"); // <-- new
}

＆＃13;

body {margin:0; padding:0}
h1 {background-color:#eee; width: 100%;}
.foo {background-color:#00c; color:#fff; margin-top:1em; margin-bottom:1em} // <-- updated
.wide { width: 110%; } // <-- new
.wide > * { width: auto; } // <-- new

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

＆＃13;

与你的工作方式略有不同，但我认为它应该完成你想做的事情

更新

而不是

$("body").addClass("wide");

添加

$("#para").parent().addClass("wide");
$("#para").parent().width($("#para").parent().width()*1.1);

应该使用表格，但我不确定你是否会发现这个比

更好

$("h1").width($(".wide").width());

你试图避免。

JSFiddle

Answer 2

如果您按如下方式设置body和宽块样式，则可能会有效。它是我能想到的唯一纯CSS 解决方案。

的 JSFIDDLE DEMO

＆＃13;
＆＃13;
function addElement() { $("#para").after('<div class="wide">Wide</div>'); $("a").fadeOut(); }
＆＃13;
body { margin: 0; display: inline-block; /*key*/ min-width: 100%; /*key*/ } h1 { background-color: #ccc; } .wide { background-color: #00c; color: #fff; min-width: 1000px; /*percentage won't work, but vw works i.e. 110vw */ margin-top: 1em; margin-bottom: 1em; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Header 1</h1> <p id="para"> <a href="#" onclick="addElement(); return false;">Add wide element</a> </p>
＆＃13;
＆＃13;
＆＃13;

展开元素宽度以匹配展开的屏幕宽度

2 个答案: