浮动元素到底部
Gus*_*Wal 8 html javascript css
我的问题非常具体,从他/她阅读它的那一刻起就会困扰任何Web开发人员.所以要小心!
我已经为我正在建设的网站制定了布局.这个想法是<hr/>页面上有倾斜的元素,文本将环绕到(见下图.黑线表示<hr/>)
你看到的是一些橙色条纹.这些的每一个是具有宽度的浮动元件10px,然后20px,再30px等黑线代表在那里停止,并且因此在那里切断该文本.
正如您可能猜到的那样,大橙色区域是一个浮动元素,宽度为0,其高度为100%其父级减去70个其他浮动元素(条纹)的高度,即70px.
问题:这似乎不可能.我得到的是这个:
由于这些小条纹都1px很高,无论如何它们都会出现.但是最大的一个依赖于父母的高度.如果我要修正父母的身高,那就行了.但我希望盒子是动态的.这意味着我应该能够更改内部文本.此外,如果我要修复它的高度,上下缩放页面看起来是灾难性的.
我需要做的是:第一个大浮动元素应该占用它所需的空间(100% - 70px),而不是给它的父级一个固定的高度,同时保持浮动.
我将用我所能提供的所有声誉来奖励解决这个问题的人,因为这已经困扰了我好几个月.
对于试图解决问题的人.有一些想法可能会有所帮助:
- 表格单元格可以将元素对齐到底部
- 我试过很多方面的旋转.太糟糕了,没有颠倒的文字.
- 我已经尝试将边距,填充和边框添加到第一个浮动div.到目前为止,没有一种组合可行.
- 我实际上并不希望元素浮动.这就是我选择尝试的方式,因为我不知道另一种方法来围绕元素包装文本.您可以自由尝试任何您想要的东西,只要内部文本可以更改,并且在放大或缩小时看起来像正常情况一样好.
- 我认为唯一的解决方案是使用Javascript来计算div需要的高度.
以下是填入小提琴的所有代码
编辑:我想我确实知道解决方案.我只是不知道如何编程.
使用Javascript,浏览器应计算容器内容(文本,图像,边距等)的高度.然后,#lw应该改变到那个高度.在那之后,#lw应该缩小1px.在此之后,应该检查内容是否发生了变化.如果发生这种情况,浏览器应检查内容高度的高度是否大于#lw+ 70px 的高度.如果它没有高于此值,则应重复该过程.如果确实如此,#lw应该再次缩小1px,并且该过程应该停止.调整窗口大小时,该过程应从头开始.
这似乎是一个工作的地狱,如果我认识JS,我会很感激地接受挑战.我想我要去Codecadamy了.
编辑:
与此同时,我提出了一个不太复杂的问题版本.我已经研究过css-shapes,并发现这些将允许我做70个浮动元素所做的事情,只有一个元素.我已经制作了另一组文件,但是它需要一个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));
}
给顶部 div 一个固定高度（临时），这是您希望非角度文本出现的高度。看起来您已经将底部高度固定为 70 像素。
<style type="text/css">
#topPart { height: 600px }
</style>
为了适应不同的屏幕高度，我们必须计算顶部 div 的正确尺寸，并减去底部所需的尺寸。
<script type="text/javascript">
window.onload=function(){
function resize()
{
var heights = window.innerHeight;
document.getElementById("topPart").style.height = heights - 70 + "px";
}
resize();
window.onresize = function() {
resize();
};
}
</script>
只要浏览器窗口发生变化，我们就会运行调整大小。通过这样做，顶部 div 和底部将同步。
在页面html中添加（基本）
<div id="topPart">
<p>Some text or other divs whatever you like in here</p>
</div>
<div>
The bottom part - add your staggered divs here
</div>
您不能使用 100% 并期望它起作用，只需记住您需要减去底部部分。我会首先减去大约 150 - 200 像素，这样你就不会碰到屏幕底部并弄乱。该页面将动态运行，您可以放大或缩小页面。
这是我试图理解这一点的尝试......