Question

我有4个div，需要将它们排成一行，每个div包含一个图像和一个span标记，但我无法将它们排成一行，因为每个div的宽度都是100％。是否可以对齐它们？如果没有其他选择？

body
{
  box-sizing:boder-box;
  margin:0;
}
.container
{
  width:20%;
  height:100%;
  position:relative;
}
.item
{
  width:100%;
  height:20%;
  overflow:hidden;
}
.img
{
  height:20%;
  width:100%;;
}

<div class="container">
 <div class="item">
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
 <div class="item" >
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
  <div class="item">
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
  <div class="item">
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
</div>

编辑：显示：内联块无法正常工作。编辑：我正在尝试使用div创建100％宽度的carousal。

Answer 1

      <html>
<head>
    <style>
    .body
    {
        box-sizing:boder-box;
        margin:0;
    }
        .container
        {
            width:20%;
            height:100%;
            position:relative;
        }
        .item
        {
            width:100%;
            height:20%;
            overflow:hidden;
        }
        .img
        {
            height:64%;
            width:365px;;
        }           
    </style>
</head>
<body>
<div class="container">
 <div classs="item">
    <img src="1.jpg" class="img"/>
    <span>some text</span>
 </div>
 <div classs="item" >
    <img src="1.jpg" class="img"/>
    <span>some text</span>
 </div>
  <div classs="item">
    <img src="1.jpg" class="img"/>
    <span>some text</span>
 </div>
  <div classs="item">
    <img src="1.jpg" class="img"/>
    <span>some text</span>
 </div>
</div>
</body>
</html>

Answer 2

使用flexbox可以轻松实现这一目标。首先，你的第一个样式块中有一个拼写错误：应该是box-sizing: border-box，而不是box-sizing: boder-box。

要让四个项目占据空间的25％，只需在display上将flex声明设为.container

.container {
  display: flex;
}

另外，假设您希望图片占据其.item容器的整个宽度，您需要将img宽度设置为100%

img {
  width: 100%;
}

这是假设没有影响这些元素的任何其他样式（例如框架）的来源。

Answer 3

您还可以使用display:table和display:table-cell，这样您的元素就像表格一样。

如果您将.container替换为：

.container
        {
            width:20%;
            height:100%;
            position:relative;
            display: table;
        }

并添加以下内容：

.container > div {
              display: table-cell;
            }

.container中的子元素将对齐并且行为类似于td元素。

Answer 4

我已将container设为width:100%而item设为width:20%和float left;

class的拼写在儿童div中是错误的。我已经纠正了它。

希望这会有所帮助：）

＆＃13;

body
{
box-sizing:boder-box;
margin:0;
}
.container
{
  width:100%;
  height:100%;
  position:relative;
}
.item
{
  width: 20%;
  float: left;
  height:auto;
  margin:10px;
}
.img
{
  height:20%;
  width:100%;
}

＆＃13;

<div class="container">
 <div class="item">
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
 <div class="item" >
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
  <div class="item">
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
  <div class="item">
  <img src="1.jpg" class="img"/>
  <span>some text</span>
 </div>
</div>

＆＃13;

Answer 5

根据您的要求，您可以使用white-space:nowrap和overflow:hidden组合。它会将所有项目排成一行..

然后你可以使用变换来滑动它们。

^{注意：我在项目中使用了transform:translateX(-30px)来向您展示视觉效果..}

Stack Snippet

＆＃13;

body {
  box-sizing: boder-box;
  margin: 0;
}

.container {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.item {
  width: 100%;
  display: inline-block;
  transform:translateX(-30px);
}

.img {
  width: 100%;
  display: block;
}

.item span {
  display: block;
}

＆＃13;

<div class="container">
  <div class="item">
    <img src="http://via.placeholder.com/350x150" class="img" />
    <span>some text</span>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/350x150" class="img" />
    <span>some text</span>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/350x150" class="img" />
    <span>some text</span>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/350x150" class="img" />
    <span>some text</span>
  </div>
</div>

＆＃13;

将多个div与100％宽度对齐

5 个答案: