html - HTML 页面部分

Question

有什么方法可以测量我的 HTML 页面，然后找出它的 40% 或 60% 的长度，以便页面的某些元素只能占据那么多？

Answer 1

是的，使用 CSS 这很简单

<div style="width: 70%;"> this will take up 70% of your width </div>

Answer 2

（就水平对齐而言）您可以使用 2 个 div 元素和 CSS 实现这种样式/标记；

<!--Your HTML-->
<div id="fortypercent" class="next_to_each_other"></div>
<div id="sixtypercent" class="next_to_each_other"></div>
<!--Ends here-->

/***Your CSS***/
div.next_to_each_other {position:relative; float:left;}
div#fortypercent {width:40%;}
div#sixtypercent {width:60%;}
/***Ends here***/

就这样。

（就垂直对齐而言）您也可以使用 2 个 div 元素和 CSS 来实现这种样式/标记；这次标记保持不变，样式如下。

/***Your CSS***/
html, body {width:100%; height:100%; margin:0px; padding:0px;}
div.next_to_each_other {position:relative; float:left;}
div#fortypercent {width:100%; height:40%;}
div#sixtypercent {width:100%; height:60%;}
/***Ends here***/

您可以通过为每个 div 分配不同的背景颜色来确定它是否有效。

Answer 3

这很容易做到，尽管您需要了解 JavaScript。

这个语句将给 "foo" id "bar" 的像素长度：

foo = document.getElementById('bar').offsetHeight;

如果你这样做

height1 = foo * 0.4;
height2 = foo * 0.6;

你可以用它来做

document.getElementById('height1').style.height = height1 + 'px';
document.getElementById('height2').style.height = height2 + 'px';

使用此方法，您可以查看一个元素的高度，并根据第一个元素设置其他元素的高度。

告诉我是否有您要我添加的内容！