向左浮动 div
floating a div into left
只是想让我所有的 div 列表像这个一样向左浮动
只是遇到了困难,想知道我哪里出错了,我是不是放错了 division 什么的
我的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>
尝试 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>
您的代码示例包含太多不相关的信息。
为了达到预期的结果,只需将 class 和 float: left
添加到每个 div.
.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>
.list_wrapper2
宽度太大了,除非你body宽度是 3000 像素。
将宽度减小到 200px 左右,它们应该可以正确浮动。
尝试去掉宽度属性,因为两个div需要1800px的宽度,所以它们不能浮动到彼此的左边
只是想让我所有的 div 列表像这个一样向左浮动
只是遇到了困难,想知道我哪里出错了,我是不是放错了 division 什么的
我的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>
尝试 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>
您的代码示例包含太多不相关的信息。
为了达到预期的结果,只需将 class 和 float: left
添加到每个 div.
.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>
.list_wrapper2
宽度太大了,除非你body宽度是 3000 像素。 将宽度减小到 200px 左右,它们应该可以正确浮动。
尝试去掉宽度属性,因为两个div需要1800px的宽度,所以它们不能浮动到彼此的左边