将 div 浮动到左侧答案

【问题标题】：floating a div into left将 div 浮动到左侧
【发布时间】：2016-07-28 09:38:51
【问题描述】：

只想让我所有的列表 div 像这个一样向左浮动

只是很难过，想知道我哪里出错了，是我放错了部门还是什么

我的 CSS

.list_wrapper{
width:200px;
background-color:red;
display:block;}



.list_wrapper2{
width:900px;
background-color:blue;
float:left;
}

我的html

    <div class = "list_wrapper2" >
<h3><?php echo $letter?></h3>

<?php foreach($pages as $page): ?>
            <div class = "list_wrapper" >
            <ul>
                <li class="listcss">
                <a href="<?php echo BASE_URL;?>/page.php?page=<?php echo e($page['slug']);?>"><?php echo e($page['label']);?></a>
                </li>
            </ul>
            </div>
<?php endforeach; ?>
<?php endfor; ?>
</div>

【问题讨论】：

我不明白这是一个 PHP 问题，据我所知，这完全是一个 CSS 问题。
HTML 中的 list_wrapper CSS 类在哪里？
对不起，我输入了错误的htm代码
.list { float: left; } 就这么简单
@RaymartCalinaoAsthreA : 请添加正确的代码

标签： html css divide

【解决方案1】：

尝试display: inline-block 而不是float: left。这是一个入门示例。

注意：float 会在溢出时将 div 换到下一行！

.wrapper {
  overflow: scroll;
  white-space: nowrap;
}
.wrapper > div {
  display: inline-block;
  min-width: 50px;
  min-height: 50px;
  background-color: cornflowerblue;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

【讨论】：

我的 div 的哪一部分是您建议在 forloop 外部或内部的包装器？
@RaymartCalinaoAsthreA：外面

【解决方案2】：

您的代码示例包含太多不相关的信息。为了达到预期的效果，只需在每个 div 中添加一个带有 float: left 的类。

.floating-left{
  float: left;
  width: 100px;
  height: 40px;
  border: 2px solid black;
  margin-right: 20px;
  margin-bottom: 20px;
}

<div class="floating-left"></div>
<div class="floating-left"></div>
<div class="floating-left"></div>
<div class="floating-left"></div>
<div class="floating-left"></div>
<div class="floating-left"></div>

【讨论】：

【解决方案3】：

.list_wrapper2

宽度太大，除非你的身体宽度像 3000 像素。将宽度减小到 200px 左右，它们应该可以正常浮动。

【讨论】：

【解决方案4】：

尝试去掉width属性，因为两个div需要1800px的宽度，所以不能浮动到彼此的左边

【讨论】：