无法在css中将两个元素并排对齐

4uqofj5v 于 2023-05-02 发布在其他

关注(0)|答案(4)|浏览(136)

我是一个前端初学者，我试图将“水果”和“计算机”放在一起，但在我的代码中，“计算机”在“水果”下面。“

* {
  box-sizing: border-box;
}

.container {
  width: auto;
  border: 3px solid black;
  margin: 33px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.item {
  border: 4px;
  margin: 12px;
  padding: 12px 4px;
  background: rgb(197, 105, 105);
  border-radius: 12px;
}

#fruits {
  float: left;
  width: 48%;
  border: 3px solid darkblue;
}

#computer {
  width: 48%;
  border: 3px solid darkblue;
}

#stationary {
  float: left;
  width: 50%;
  border: 3px solid darkblue;
}

<div class="container">
  <div id="fruits" class="item">
    <h3>Fruits</h3>
    <p id="fruitspara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et nesciunt earum corporis ipsam, quaerat accusantium quae harum dicta facere ab, illo, molestias alias asperiores ea illum ducimus recusandae quidem praesentium.</p>

  </div>
  <div id="computer" class="item">
    <h3>Computer</h3>
    <p id="computerpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias numquam recusandae deserunt earum asperiores quod harum tempora, eligendi amet quidem natus ab, laborum itaque quos. Laboriosam in eius doloribus aliquid?</p>
  </div>
  <div id="stationary" class="item">
    <h3>Stationary</h3>
    <p id="stationarypara" class="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa, dolores exercitationem sint atque, saepe illum maiores obcaecati ratione doloremque quam laboriosam eum ad aperiam ab pariatur fuga explicabo esse aliquid.</p>
  </div>
</div>

这导致以下对齐：

我知道这个演示不好，但这只是为了练习。请告诉我是什么错误。

css

来源：https://stackoverflow.com/questions/76083757/not-able-to-align-two-elements-beside-each-other-in-css

4条答案

按热度按时间

chhkpiq41#

两个div（水果和计算机）都需要浮动，以便它们彼此相邻浮动。或者，您可以将它们设置为inline-block。
但实际上，Flex（正如另一位评论者所说）是我认为您正在尝试做的事情的更好解决方案

赞(0）回复(0）举报 2023-05-02

wz3gfoph2#

*{
            box-sizing: border-box;
        }
        .container{
            width: 100%;
            border: 3px solid black;
            margin: 33px auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .item{
            border:4px;
            margin: 12px;
            padding: 12px 4px;
            background:rgb(197, 105, 105);
            border-radius:12px;
        }
        #fruits{
            float: left;
            width: 45%;
            border:3px solid darkblue;
            
        }
        #computer{
           float: left;
            width: 45%;
            border:3px solid darkblue;
        }
        #stationary{
            float: left;
            width: 50%;
            border:3px solid darkblue;
        }

<div class="container">
        <div id="fruits" class="item">
            <h3>Fruits</h3>
            <p id="fruitspara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et nesciunt earum corporis ipsam, quaerat accusantium quae harum dicta facere ab, illo, molestias alias asperiores ea illum ducimus recusandae quidem praesentium.</p>

        </div>
        <div id="computer" class="item">
            <h3>Computer</h3>
            <p id="computerpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias numquam recusandae deserunt earum asperiores quod harum tempora, eligendi amet quidem natus ab, laborum itaque quos. Laboriosam in eius doloribus aliquid?</p> 
        </div>
        <div id="stationary" class="item">
            <h3>Stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa, dolores exercitationem sint atque, saepe illum maiores obcaecati ratione doloremque quam laboriosam eum ad aperiam ab pariatur fuga explicabo esse aliquid.</p> 
        </div>
    </div>

我已经修复了你的代码，但你应该使用Flexbox或Grid，因为Float现在已经过时了。要了解flex，您可以使用此站点FlexFroggy

赞(0）回复(0）举报 2023-05-02

vddsk6oq3#

默认显示为block，因此div占据所有宽度。为了能够实现你想要的，你可以使用flexbox：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alignment</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            display:flex;
            flex-wrap: wrap;
            width: auto;
            border: 3px solid black;
            margin: 33px auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .item{
            border:4px;
            margin: 12px;
            padding: 12px 4px;
            background:rgb(197, 105, 105);
            border-radius:12px;
        }
        #fruits{
            /*float: left;*/
            width: 48%;
            border:3px solid darkblue;
            
        }
        #computer{
            
            width: 48%;
            border:3px solid darkblue;
        }
        #stationary{
           /* float: left;*/
            width: 50%;
            border:3px solid darkblue;
        }

    </style>
  </head>
  <body>
    <div class="container">
        <div id="fruits" class="item">
            <h3>Fruits</h3>
            <p id="fruitspara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et nesciunt earum corporis ipsam, quaerat accusantium quae harum dicta facere ab, illo, molestias alias asperiores ea illum ducimus recusandae quidem praesentium.</p>

        </div>
        <div id="computer" class="item">
            <h3>Computer</h3>
            <p id="computerpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias numquam recusandae deserunt earum asperiores quod harum tempora, eligendi amet quidem natus ab, laborum itaque quos. Laboriosam in eius doloribus aliquid?</p> 
        </div>
        <div id="stationary" class="item">
            <h3>Stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa, dolores exercitationem sint atque, saepe illum maiores obcaecati ratione doloremque quam laboriosam eum ad aperiam ab pariatur fuga explicabo esse aliquid.</p> 
        </div>
    </div>
 </body>
</html>

这就是结果

赞(0）回复(0）举报 2023-05-02

64jmpszr4#

宽度：48%;

width: auto;
        border: 3px solid black;
        margin: 33px auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;       
    }
    .item{
        border:4px;
        margin: 12px;
        padding: 12px 4px;
        background:rgb(197, 105, 105);
        border-radius:12px;
    }
    #fruits{
        float: left;
        width: 48%;
       position:absolute;
        border:3px solid darkblue;
    }
    #computer{
       margin-left: 50%;
       position:absolute;
       width: 48%;
       border:3px solid darkblue;
    }
    #stationary{
      margin-top: 20%;
      position: absolute;
      float: left;
      width: 48%;
      border:3px solid darkblue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div id="fruits" class="item">
            <h3>Fruits</h3>
            <p id="fruitspara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
               nesciunt earum corporis ipsam, quaerat accusantium quae harum dicta facere ab, illo, molestias alias asperiores ea illum ducimus recusandae quidem praesentium.</p>

试试这个

赞(0）回复(0）举报 2023-05-02

我来回答

无法在css中将两个元素并排对齐

4条答案

相关问题

热门标签

最新问答