Question

我正在尝试制作一个图像和描述的列表，这些图像和描述是以较大宽度组成的三组，并且以较小的宽度转到两组。但是当我崩溃时，它变得非常混乱，我不知道该怎么做才能让它分解成干净的半列。在此先感谢您的帮助！

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<input type="button" value="confirm" onclick="confirm()" />

＆＃13;

div.thirds {
	padding-bottom: 20px;
	padding: 50px;
	text-align: center;
	font-family: Gudea;
}

div.button1 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.one-third {
	width: 30%;
	float: left;
	margin-right: 5%;
	text-align: center;
	font-family: Gudea;
}

div.button2 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.one-third-last {
	margin: 0;
	text-align: center;
	font-family: Gudea;

}

div.button3 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

@media (maxwidth:900px;)
div.one-third {
	width: 47.5%;
}

div.one-third-second {
	margin: 0;
}

div.one-third-last {
	clear: both;
	float: none;
	width: auto;
	padding: 20px 0 0 0;
}

div.one-third {
	width: 47.5%;
}

div.one-third-second {
	margin: 0;
}

div.one-third-last {
	clear: both;
	float: none;
	width: auto;
	padding: 20px 0 0 0;
}

＆＃13;

Answer 1

我确定你的问题在于混合百分比和固定值。尝试并考虑100％玩。例如，如果你的宽度为48％，固定边距为100px，那么如果100px大于你剩下的2％，会发生什么。问题。那是什么。

Answer 2

bootstrap是要走的路 - 下面将在中到大视口上显示2行3个div。在一个小视口上有3行2个div。请注意，如果你想要一个大屏幕的样式和一个col-sm类，如果你想要一个移动大小（xs）和小屏幕（sm）之间的类，也有一个col-lg类，我还没有插入进入div的OP代码 - 我只想证明这一点：

单击以下代码段中的全屏链接，根据视口的宽度查看div的更改位置。我还为每个文本添加了一个边框并使文本居中 - 仅用于演示目的。

.container div{
  text-align:center;
  border:solid 1px #ddd}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
  <div class="col-md-4 col-xs-6">Content</div>
</div>

Answer 3

您是否可以使用CSS Flex？如果它符合您所需的CSS浏览器支持的最低级别，那么它可以真正为您节省很多您目前正在尝试管理浮动的麻烦。

<强> CSS

.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.item {
  width: 33%;
}
@media (max-width: 900px) {
  .item {
    width: 50%;
  }
}

<强> HTML

<div class="flex wrap">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

您可以展开示例以在每个.item类中包含其他标记。我在这里提供了一个更大的例子 - JSFiddle

从三分之一列到二分之一列

3 个答案: