gpt4 book ai didi

html - 左右对齐一个div内的两个div

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

我有一个格式如下的div

<div id="main">
<div id="row1">
<div id="label1"></div>
<div id="value1"></div>
</div>
<div id="row2">
<div id="labe2"></div>
<div id="value2"></div>
</div>
<div id="row3">
<div id="label3"></div>
<div id="value3"></div>
</div>
</div>

我正在尝试实现一种布局,其中所有值在每一行中都在右侧彼此对齐,标签在左侧对齐。

我试过使用 float:left 和 float:right 之类的

CSS

#row1{
display: inline
}
#value1{
float:right
}
#row2{
display: inline
}
#value2{
float:right
}
#row3{
display: inline
}
#value3{
float:right
}

但是,我试过的这个 css 缺少布局,并且行元素相互冲突。有人可以帮助解决问题吗?

最佳答案

如果您熟悉 HTML 表格的工作原理,那么您可以使用 display:table-*特性。顺便说一句,使用类而不是 id。 id 专门用于诸如 DOM 操作或表单之类的事情。除非别无选择,否则不要将 id 用于样式。

片段

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>inline</title>
<style>
#main {
border: 5px dotted grey;
display: table;
width: 300px;
}
.row {
display: table-row;
}
.value {
border: 1px solid red;
display: table-cell;
width: 50%;
}
label {
border: 1px solid blue;
display: table-cell;
}
</style>
</head>

<body>
<main id="main">
<div class='row' id="row1">
<label for='value1'>V1</label>
<div id="value1" class='value'>44</div>
</div>
<div class='row' id="row2">
<label for='value2'>V2</label>
<div id="value2" class='value'>ALPHA</div>
</div>
<div class='row' id="row3">
<label for='value3'>V3</label>
<div id="value3" class='value'>💀</div>
</div>
</main>
</body>

</html>

关于html - 左右对齐一个div内的两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39779601/

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