Question

我正在尝试使用CSS设计页面，我需要在同一行显示三个框。

我使用了三个div并将float:left添加到第一个，margin-left:8cm;添加到中心，float:right添加到右侧。

左侧和中间框完美显示，但右侧框转到下一行。我甚至尝试添加margin-left:16cm;，它仍然排成一行。

有人可以帮忙吗？

Answer 1

只需在所有三个元素上使用float:left;，它们就会相互排列。

Answer 2

float:right浮动 next 块元素右侧的块元素，而不是前一块元素。

如果要保留DOM中<div>元素的顺序，则应将第一个和第二个元素设置为float:left，并设置第三个元素的左边距以适应前两个占据的空间。

或者，您可以将<div>元素放在第一，第三，第二顺序中并保留当前样式。

Answer 3

不会弄乱你的标记，并且不需要依赖于其他div的宽度的余量的替代方法是浮动前两个div left，并浮动最后一个right。只要div的增加宽度适合父元素，它就应该显示为三列。

<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div>

#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }

第三个div中的clear:none使这个工作在IE 6＆amp; 7。

Answer 4

[
   {
        "CUSTOMER_ID" : "C001",
        "CUSTOMER_NAME": "Weng Fong Sdn Bhd",
        "ADDRESS_LINE_1": "Tai Rai Bong",
        "ADDRESS_LINE_2": "Hatyai",
        "PRIVATE_NUMBER" : "10001",
        "EXT_FLDS" : {
            "PRINTING_NUM": {
              "fieldvalue": 12,
              "fieldlabel": "Printing Number",
              "uictrl": "sap.m.Input"
            },
            "COUNTRY": {
              "fieldvalue": "Thailand",
              "fieldlabel": "Country",
              "uictrl": "sap.m.ComboBox"
            }
        }
]

Answer 5

.whateveritiscalled {
  display: inline-block;
 }

简单

如何在同一行显示3个框？

5 个答案: