相关疑难解决方法(0)
如何使div不大于其内容？
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到我的范围table.
推荐指数
解决办法
查看次数
流体宽度等间距DIV
我有一个流体宽度的容器DIV.
在这个我有4个DIV全部300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
我想要发生的是箱子1向左浮动,箱子4向右浮动,箱子2和3在它们之间均匀间隔.我希望间距也是流畅的,因此随着浏览器变小,空间也变小.
推荐指数
解决办法
查看次数
如何使Flex容器居中但左对齐flex项目
我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.
这是我的一个例子:
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
border: 1px solid gray;
margin: 15px;
padding: 5px;
width: 200px;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>推荐指数
解决办法
查看次数
在元素的居中网格中左对齐的最后一行
我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.
| _____ _____ _____ _____ |
| | | | | | | | | |
| | 1 | | 2 | | 3 | | 4 | |
| |_____| |_____| |_____| |_____| |
| _____ _____ _____ _____ |
| | | | | | | | | |
| | 5 | | 6 | | 7 | | 8 | |
| |_____| |_____| |_____| |_____| |
| |
这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: …
推荐指数
解决办法
查看次数
如何在CSS中集中容器内的多个div
我正在测试像Windows地铁一样的中心分频器.如果您检查以下代码:
.container {
height: 300px;
width: 70%;
background: #EEE;
margin: 10px auto;
position: relative;
}
.block {
background: green;
height: 100px;
width: 100px;
float: left;
margin: 10px;
}<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>灰色框是70%并且以屏幕为中心是正确的,但是当我使窗口变宽并且绿色分隔器移动时,您可以看到某些点处的绿色框不是居中的. …
推荐指数
解决办法
查看次数
带有内联块项目的中心框
我有一个包含显示项目的框:内联块.如果框中的项目没有填满整行,我需要在中间对齐内容,但在左边对齐项目.
我试图在内联块中设置整个内容,但这仅在只有一行项目而不是两行或更多行时才有效.此外,我需要它响应,所以不能使用固定缩进.
屏幕:
码:
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display: inline-block;
text-align: left;
}
.btn{
width: 100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}<div class="booking-time">
<div class="inner">
<button type="button" class="btn …推荐指数
解决办法
查看次数
具有固定列宽的流体flexbox网格
我有一个通过flexbox设置的容器.我想平均分配容器内的每个瓷砖,但保持它们的固定宽度为220px.
我已经接近使用flex-grow并设置了一个min-width: 220px,但它显然已经计算大小调整了瓷砖以填充容器.
我还设置了一些媒体查询,以便瓦片堆栈在某些断点上.
我目前的造型是否可以将这些瓷砖保持在220px而不会拉伸？这可以通过flexbox完成吗？有没有像flexbox一样好的替代品？
.container {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 2000px;
}
.tiles {
border: 1px solid black;
margin: 0 15px 30px 15px;
flex-grow: 1;
padding: 0;
height: 220px;
min-width: 220px;
}
@media screen and (max-width: 1140px) {
.container {
max-width: 850px;
}
}
@media screen and (max-width: 2040px) {
.container {
max-width: 1750px;
}
}
@media screen and (max-width: 1790px) {
.container {
max-width: 1500px; …推荐指数
解决办法
查看次数
当内容包装到多行时,float的宽度不再缩小以适应
这是一个测试文件.
将窗口大小调整到足以容纳所有四个盒子.请注意,容器并不像预期的那样宽.
将窗口大小调整到足够小,以使框在多行上.请注意,容器是页面的整个宽度(这是无意的).
为什么？是否有可能以不依赖于盒子大小的方式防止这种情况发生？
(见Firefox 3.5和Chrome 4.0.221.8.如果解决方案在IE6中不起作用,那很好.)
推荐指数
解决办法
查看次数
width的替代方法：多行内联阻止列表的适合内容？
我正在尝试使可变数量的缩略图列表居中，而缩略图全部位于一行上，但随后的各行都左对齐，而父元素响应地保持在页面的中心。width:fit-content一行效果很好，但是当有多行时，宽度变为100％（无论如何，在Mac chrome中）。问题说明：
http://codepen.io/scotthorn/pen/eutAH?editors=110
如果还有另一种方法可以实现我的预期目标，则我不介意更改css或html标记的任何部分。不需要适合该区域的背景，仅在我的示例中可以更好地显示正在发生的情况。我的主要目标是要有一个行为像一个行的内联块元素的居中容器的列表，但是当必须创建第二行时，其中的第一个元素在第一行的第一个元素下方排列而不是以自己为中心。
希望这是有道理的，否则我可以制作一个样机。
推荐指数
解决办法
查看次数
标签 统计
css ×9
html ×6
css3 ×4
flexbox ×2
width ×2
css-float ×1
fluid-layout ×1
grid-layout ×1
text-align ×1