0

我的问题是，对于 div 类form-profile，form-profile-side如果我想要其中 2 个 div，它们必须在 HTML 中的同一行：

<div class="span13">
  <form class="form-profile-side"></form><form class="form-profile"></form>
</div>

如果我把第二个类放在一个新的行上，它会弄乱布局（这就是我想要做的）：

<div class="span13">
  <form class="form-profile-side"></form>
  <form class="form-profile"></form>
</div>

CSS：

.form-profile-side {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-right: 0;
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.form-profile {
  display: inline-block;
  width: 817px;
  padding: 15px 15px 15px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

我如何做到这一点，以便我可以使用该类在 HTML 中创建一个新行，而不是将它们全部放在一行上？

JSFiddle：http: //jsfiddle.net/VzTxM/4/

4

1 回答 1

2

我相信您遇到的问题（如果我理解正确的问题）是 display:inline-block; 当 HTML 位于两行单独的行时添加一个 lil 分隔符 - 您可以通过浮动元素来解决这个问题？

CSS 

.form-profile-side,.form-profile {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 1px solid #d6d6d6;
    background-color: #fff;
    float:left;
}
.form-profile-side {
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  vertical-align: top;
  border-right: 0;
  width: 120px;
}
.form-profile {
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  padding: 15px 15px 15px;
  width: 817px;
}

.clear {
    clear:both;
}

HTML

<div class="span13">
  <form class="form-profile-side"><br><br></form>
  <form class="form-profile"><br><br></form>
  <div class="clear"></div>
</div>
于 2013-02-13T15:12:52.190 回答