Question

我要做的是创建两个或多个文本框，并排而不是垂直堆叠。

我尝试过使用花车，这对于2个并排的盒子来说很好，但对于3来说并不好。另外，浮动会让页面在移动设备上看起来很乱。

还有其他办法吗？

Answer 1

您可以使用CSS属性display: inline-block，但您还应该使用媒体查询来调整内联框的宽度，具体取决于阅读页面的设备的屏幕大小。

您还可以使用Twitter Bootstrap等框架，该框架具有基于网格系统的响应式框架。

Answer 2

您甚至可能不会进行媒体查询：

Fiddle 1

.box {
       display: inline-block;
       width: 180px;
       height: 180px;
       background: #ddd;
     }

Fiddle 2和浮动。

只是结果窗口的大小：它有什么问题？什么是目前无法正常工作以及您想要实现的目标（桌面和移动设备）？

Answer 3

＆＃13;

.box-container{
  display:inline-block;
  width:450px;
  }
.box{
  display:block;
  width:33%;
  float:left;
  background:#000;
  color:#fff;
  margin-left:0.3%;
  text-align:center;
  }

＆＃13;

<div class="box-container">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>

＆＃13;

网页框在水平行

3 个答案: