gpt4 book ai didi

html - Div 布局未获得与预期相同的结果

转载 作者:太空宇宙 更新时间:2023-11-04 01:02:20 25 4
gpt4 key购买 nike

我正在清理十年前的网站并将其变成 div(更干净)。阈值学习,当然。感谢 S.O.和躲避,这些年来我学到了很多东西。摆脱 table (并不是说它们不好..这样看起来更干净)

我要做的就是水平对齐两个 div。但据我所知,将它们分别向左(或向右) float ,应该将它们并排放在同一条线上。但是,这对我不起作用。我试过 block 方法,但没有。在下面,我试图在左侧获取“action”div,在右侧获取“specs”。所以我认为我做对了,但有一些干扰,所以也许是第二双眼睛?

我认为相关的另一部分,无论我在“.action_msg”中输入什么宽度 - 它都不会改变,这很烦人,因为它在美学上令人不快。显然这对表格来说很容易,但是那样太吵了,而且有很多不必要的编码,所以我决定用 div 清理所有这些

bad layout

期望的结果 - 能够拉伸(stretch)价格(或免费 sample ),使它们大小相同,规范喜欢在右侧(与操作 div 水平)看到,并在其所在的位置显示安全信息。

免责声明:在 S.O. 上有一些类似的问题(其中 9 个)。其他人,但没有人回答或查看。所以他们错过的是我放在这里的大量代码示例。

    #action_wrapper     { width: 300px; float: right;}
.action_msg { width: 250px; border: 1px solid yellow; padding:5px; border-radius: 5px; padding-left: 8px; padding-right: 8px;}
.action { float:right; background-color: blue; color: white; border: 2px cyan solid; border-radius: 5px; width: 150px; padding:5px; display: inline-block;}
.safty_msg { padding: 20px;}
#spec_wrapper { float: left; }
    <div id="action_wrapper">
<p >

<span class="action_msg">Free Sample</span>
<span class="action"><a href="download/{gameid}">Download</a></span>
</p>

<p>
<span class="action_msg">{price}</span>
<span class="action"><a href="addtocart/{gameid}">Add to your cart</a> </span>
</p>
</div>
<div style="clear:both;"></div>

<div class="safty_msg">Safe & Secure Downloads Quality Tested & Virus Free</div>

<div id="spec_wrapper">
<div id="specs">
<ul>
<li>OS: {pc_sysreqos}</li>
<li>Game Size {gamesize},</li>
<li>CPU: {pc_sysreqmhz}</li>
<li>RAM: {pc_sysreqmem}</li>
<li>Hard Drive: {pc_sysrechdd}</li>
</ul>

</div>
</div>


使用 flex 修改(正确跟踪任何人?)

html

<div class="action_container">

<div class="download">
<p class="action_msg">Free Sample</p>
<p class="action_msg">{price}</p>

</div>
<div class="buy">
<p class="action"><a href="download/{gameid}">Download</a></p>
<p class="action"><a href="addtocart/{gameid}">Add to your cart</a> </p>
</div>

<div id="specs">
<ul>
<li>OS: {pc_sysreqos}</li>
<li>Game Size {gamesize},</li>
<li>CPU: {pc_sysreqmhz}</li>
<li>RAM: {pc_sysreqmem}</li>
<li>Hard Drive: {pc_sysrechdd}</li>
</ul>

</div>
</div>

CSS

.action_container   { display: flex; width: 550px; justify-content: space-between;}
.download { flex:1;}
.buy { flex:2;}
.action_msg { border: 2px solid yellow; border-radius: 5px; padding:5px; width:120px;}
.action { background-color: blue; color: white; border: 2px cyan solid; border-radius: 5px; padding:5px; }
.safty_msg { padding: 20px; width: 100%; text-align: center;}

enter image description here

最佳答案

你不应该使用那样的标签,尝试将这 4 个东西包装在单独的 p 标签中,例如使用 display flex

<html>
<head>
<style>
.parent{
display:flex;
justify-content:space-between;
align-items :center
}
.parent p{
display:block
}
</style>
</head>
<body>
<div class="parent">
<p>free sample</p>
<p>Downloads</p>
<p>usd</p>
<p>Add crat</p>
</div>
</body>
</html>

使用第 n 个子选择器为不同的

标签设置样式

关于html - Div 布局未获得与预期相同的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52991076/

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