我的问题非常具体，从他/她阅读它的那一刻起就会困扰任何网络开发人员。所以要小心!
我为我正在构建的网站计划了一个布局。想法是有倾斜<hr/>页面上的元素，文本将环绕到这些元素(见下图。黑线代表 <hr/>)
你看到的是一些橙色条纹。每一个都是一个 float 元素，宽度为 10px ，然后 20px ，然后 30px等等。
黑线代表他们停止的地方，因此他们切断文本的地方。
正如您可能猜到的，大橙色区域是一个 float 元素，宽度为 0，高度为 100%它的父元素减去其他 70 个 float 元素(条纹)的高度，即 70px .
问题:这似乎不可能。
我得到的是这样的:
由于这些小条纹都是1px高，他们会出现，无论如何。但是大的取决于它 parent 的高度。如果我要修复 parent 的高度，它会起作用。但我希望盒子是动态的。这意味着我应该能够更改里面的文本。此外，如果我要修复它的高度，向上和向下缩放页面看起来是灾难性的。
我需要做的是:第一个大的 float 元素应该占用它需要的空间(100% - 70px) ，没有给它的父级一个固定的高度，同时保持它 float 。
我将用我所能提供的所有声誉来奖励解决这个问题的人，因为这已经困扰了我好几个月了。
对于试图解决问题的人。有一些想法可能会有所帮助:
这是打包成 Fiddle 的所有代码
编辑:我想我知道解决方案。我只是不知道如何编程。
使用 Javascript，浏览器应该计算容器内内容(文本、图像、它们的边距等)的高度。然后，
#lw应该改变到那个高度。之后，
#lw应该缩小1px。发生这种情况后，应检查内容的高度是否发生了变化。如果发生这种情况，浏览器应检查内容高度的高度是否大于
#lw 的高度。 + 70 像素。如果它没有高于该值，则应重复该过程。如果是这样，
#lw应该再次缩小 1px，并且该过程应该停止。调整窗口大小时，该过程应从头开始。
这似乎是一项艰巨的工作，如果我了解 JS，我会很感激地接受挑战。
我想我要去 Codecadamy。
编辑:
与此同时，我想出了这个问题的一个不太复杂的版本。
我研究了 css-shapes，发现这些可以让我用一个元素来做 70 个 float 元素所做的事情。
我制作了另一组文件，但是它需要一个 js 文件才能工作。我在这里要做的是将 HTML 和 CSS 粘贴为代码，并链接到 js 代码。
就像旧版本一样，代码应该测量最佳高度是多少。在我的代码中，我添加了一个
<script>带有对应该发生的事情的准确描述的标签。我想我开始看起来很懒惰，因为我无法提供有关实际 Javascript 代码的任何输入。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src='js/shapes.polyfill.min.js'></script>
</head>
<body>
<div id="container">
<div id="polybreak"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus enim arcu, porttitor vitae hendrerit euismod, efficitur pretium nulla. Sed a justo nulla. Aenean vel erat purus. In velit arcu, lacinia in justo in, vestibulum pellentesque mauris. Phasellus quis eros nunc. Vivamus fringilla euismod est, eget consectetur lacus cursus et. Fusce at arcu ac turpis laoreet feugiat nec a nulla.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula mollis leo non tempus. Praesent scelerisque dui felis. Suspendisse tristique, sapien egestas semper cursus, elit quam facilisis sapien, sit amet ornare odio nibh sed nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum libero nisi, efficitur id felis non, maximus ultricies sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rhoncus nibh enim, eget dignissim neque placerat et. Nam sit amet placerat sapien. Quisque vitae risus ac dolor porttitor tincidunt.
</p>
<p>
Nullam volutpat, lorem vitae ultricies lobortis, ligula ligula posuere erat, sed gravida sapien nisi non ante. Aliquam tellus sapien, placerat mollis tempor quis, consequat imperdiet magna. Etiam cursus ornare mauris sit amet varius. Sed dignissim euismod felis, at aliquet est fringilla at. Duis lorem nunc, imperdiet nec rhoncus et, egestas quis nunc. Nulla imperdiet elementum libero consequat tempor. Donec ante nunc, pellentesque nec ex dapibus, auctor sagittis ipsum. Phasellus ut est ex.
</p>
</div>
<script src='js/shapes.polyfill.min.js'></script>
<script type="text/javascript">
On load and on resize:
Make #polybreak the same height as #container + 60px.
Subtract 1px off #polybreak''s height and check: is #container higher than #polybreak? If so, add 1px and stop. If not, repeat.
</script>
</body>
</html>
CSS
html, body{
margin: 0;
padding: 0;
height: 100%;
}
p{
text-align: justify;
}
#container{
width: 700px;
margin: 0 auto;
}
#polybreak{
width: 100%;
float: left;
shape-outside: polygon(0 calc(100% - 100px), 700px calc(100% - 1px), 700px 100%, 0 calc(100% - 99px));
}
链接到原始 js 代码
https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/master/shapes-polyfill.min.js
最佳答案
由于每个人都在以任何方式发布 Javascript 答案，让我们将实际解决方案放入一堆。即使使用 Javascript 的问题是没有定义的方法来“计算”#lw 的最终高度。因为预测文本换行的行为是不可能的。
//Get a nice starting point
Zepto(".lW").hide();
var sh = document.getElementById("wrapper").scrollHeight;
document.getElementById("lw").style["height"] = sh - 60 + "px";
Zepto(".lW").show();
//Start the search
var height = parseInt(document.getElementById("lw").style["height"]);
var difference = Infinity;
var bestheight = 0;
var i = 0;
var checker = setInterval(function(){
i++;
height += 1;
document.getElementById("lw").style["height"] = height + "px";
var sh = document.getElementById("wrapper").scrollHeight;
//Now the interesting part, we don't want to get the first situation
// where the #lw is greater than the floats, what we want is the most
// optimal part, which we are going to search over a certain pixel range.
// In this case that pixel range is hardcoded as 30 pixels.
if(Math.abs(height + 70 - parseInt(sh)) < difference){
difference = Math.abs(height + 70 - parseInt(sh));
bestheight = height;
}
if(i>30){
clearInterval(checker);
document.getElementById("lw").style["height"] = bestheight + "px";
}
},0);
这是 solution 的 JSFiddle .
关于javascript - float 元素到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25837744/