Question

我正在清理已有十年历史的网站，并将其转换为div（更加干净）。当然，学习学习。感谢S.O.和躲避，多年来，我学到了很多东西。摆脱表格（不是说不好）。这样看起来就更干净了

我要做的就是将两个div水平对齐。但是根据我所学到的，是将它们分别向左（或向右）浮动，应该将它们并排放在同一行上。但是，这对我不起作用。我尝试了块方法，但是什么也没有。在下面，我尝试在左侧获取“操作” div，在右侧获取右侧的“规格”。所以我认为我没错，但是有一些干扰，也许是第二双眼睛？

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

期望的结果-能够拉伸价格（或免费样品），使它们具有相同的尺寸，并且规格希望在右侧（水平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;}

Answer 1

您不应使用这样的标签，请尝试将这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个子选择器在内部设置不同的

标签样式

Div布局未获得预期的结果

1 个答案: