gpt4 book ai didi

html - 如何制作一个使用整个左侧(1/4)的div元素?

转载 作者:行者123 更新时间:2023-11-28 00:37:01 25 4
gpt4 key购买 nike

我是HTML / CSS编码的新手,正在尝试建立一个网站。我想隔离顶部,左侧菜单,右侧是每隔x秒更新一次的信息行情栏。

我做到了:

<aside>
text1
</aside>


并在CSS中:

aside {
float: right ;
width: 25%;
height: 75% ;
border: 1px solid green;}


现在我不确定如何制作它,它的整个左侧都像“屏幕的1/4”,我的问题是,我需要在它的css代码中放入多少数字(%)。现在看起来真的很乱:D

我的网站: https://www.guwamiwa.de/~nb.marxer/test/

最佳答案

您可以尝试使用CSS的floatwidth属性来调整列。下面是示例:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-left {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

.column-right {
float: left;
width: 75%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
<div class="column-left" style="background-color:#aaa;width:25%;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>

</body>
</html>


您可以尝试一下:
https://jsfiddle.net/SiddharthMishra/3k2vqLpw/

关于html - 如何制作一个使用整个左侧(1/4)的div元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54098602/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com