Question

我很惊讶为什么这个div浮动在两端都给了太多空间。我有一个父母DIV和另外3个孩子DIV。 CSS代码如下：

//这是父DIV的CSS。

.row {
  width: 800px;
  background:#E3E3E3;
  height:50px;
  padding: 5px;
  border: 2px black;
  padding-top: 5px;
}

//这是中间DIV的CSS。

.element-field {
  width: 350px;
  display: inline-block;
  vertical-align:middle;
  padding-top: 5px;
  padding-bottom: 25px;
}

//这是左侧DIV的CSS。

.title-field{
    text-align:left;
    width: 100px;
    float:left;
    word-wrap:break-word;
    position: absolute;
    left: 0px;
    border:3px solid #8AC007;
    padding: 10px;
}

//这是右侧DIV的CSS。

.comment-field{
    text-align:left;
    width: 100px;
    display: inline-block;
    word-wrap:break-word;
}

//这是HTML文档

<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div class="row">
          <div class="title-field"><label>This DIV is giving too much a space at left end and I don't understand why</label></div>
          <div class="element-field"><input name="lastname" id="lastname" maxlength="15" type="text" class="css-input" placeholder="ENTER LASTNAME" value=""></div>
          <div class="comment-field">This DIV is giving too much a space at the right end and I don't understand why</div>
        </div>
    </body>
</html>

如何在不给出这些间隙的情况下使文本适合这些DIV并且不允许文本流出灰色背景的DIV？非常欢迎您的专业意见。

编辑：这是提供的代码的小提琴：http://jsfiddle.net/ohdjzxb4/

Answer 1

您可以使用表格布局。

＆＃13;

.row {
  width: 800px;
  background:#E3E3E3;
  height:50px;
  padding: 5px;
  border: 2px black;
  padding-top: 5px;
  display: table;
}
.element-field {
  width: 80%;
  display: table-cell;
  vertical-align:middle;
  padding-top: 5px;
  padding-bottom: 25px;
text-align: center;
}
.title-field{
text-align:left;
width: 20px;
word-wrap:break-word;
border:3px solid #8AC007;
padding: 10px;
  display: table-cell;
}
.comment-field{
text-align:left;
width: 20%;
  display: table-cell;
word-wrap:break-word;
    vertical-align: middle;
}

＆＃13;

<div class="row">
      <div class="title-field"><label>This DIV is giving too much a space at left end and I don't understand why</label></div>
      <div class="element-field"><input name="lastname" id="lastname" maxlength="15" type="text" class="css-input" placeholder="ENTER LASTNAME" value=""></div>
      <div class="comment-field">This DIV is giving too much a space at the right end and I don't understand why</div>
    </div>

＆＃13;

Answer 2

完成：http://jsfiddle.net/wfo93rwn/

我希望这是你所期望的。

CSS：

.row {
   width: 800px;
   background:#E3E3E3;
   height:150px;
   padding: 5px;
   border: 2px black;
   padding-top: 5px;
   overflow:auto;
}

.element-field {
   width: 350px;
   vertical-align:middle;
   padding-top: 5px;
   padding-bottom: 25px;
   float: left;
}

.title-field{
   text-align:left;
   width: 100px;
   float:left;
   word-wrap:break-word;
   border:3px solid #8AC007;
   padding: 10px;
}

.comment-field{
   text-align:left;
   width: 100px;
   word-wrap:break-word;
   float: right;
}

DIV定位不起作用

2 个答案: