定位div像表格单元格和行

时间：2015-07-13 14:11:35

标签： html css

我正在尝试制作一些小游戏来学习一些JavaScript。

好的，所以我一直在使用，直到现在我的内容表（图片）：

enter image description here

现在，我想要做的是使用div而不是table。但我想让它们看起来与上面的图像类似。 这就是我现在所拥有的：

enter image description here

我的Lemonade stand div代码（与其他代码相似）：

<div style="background: url(images/texture.png); display: table; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>

我是初学者，正在努力学习。谢谢！

6 个答案:

答案 0 :(得分：2)

如果你添加下一个样式，

div会像表一样：

显示：表格; 到div table-analog

显示：table-row; 到div tr-analog

显示：table-cell; 到div td-analog; 

<div style="display: table;">

<div style="display: table-row;">
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b>  <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b>   <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b>   <span id="pretlevel"> 0 </span> $ </div>
</div>

答案 1 :(得分：0)

DEMO http://jsfiddle.net/o7jarr8n/

HTML 

<div class="row">
  <div class="box">1</div>
  <div  class="box">2</div>
</div>
<div class="row">
  <div  class="box">3</div>
  <div  class="box">4</div>
</div>

CSS 

.row {
    margin: 0 auto;
    text-align:center;
    display:block; // change line

}
.box {
    display:inline-block; // same line
    background:red;
    width:100px; 
    height:50px;
    margin:5px;
}

内联块，会使div彼此相邻

答案 2 :(得分：0)

您可以使用display: table（有一些浏览器兼容性问题）和display: inline-block（我更喜欢）：

＆＃13;
＆＃13; 
<div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div><div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
  <div style="padding-bottom: 7px"><b><center>Restaurant</center></b></div>
  <div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
  <div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
  <div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
  <div> <font style="font-size: 15px">(Prod. per click) </font> </div>
  <div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

嗯，你有不同的选择。

您可以使用inline-block作为显示。

例如，您可以将float: left与width: 40%一起使用。

所以，这里的多样性是浮动的div。

另外，请注意我已将css作为外部事物放置，因此您可以有一个很好的基础来真正学习如何做事。

我使用了班级选择器，如果你不知道它是什么，我建议你去寻找它们。它们是CSS的基础。

＆＃13;
＆＃13; 
.item {
  background: url(images/texture.png);
  border: solid black 2px;
  padding: 10px;
  width: 40%;
  float: left;
}
.line {
  padding-bottom: 7px;
}
.item-container {
  max-width: 300px;
}
＆＃13; 
<div class="item-container">
  <div class="item">
    <div class="line">
      <b>Lemonade stand</b>
    </div>
    <div class="line">
      <button id="countButton" style="padding: 2px;">
        <img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
      </button>
    </div>
    <div><b>Level:</b><span id="displayLevel"> 1 </span> 
      <img src="images/plus.png" id="buyLevel" width="20px" height="18px">
    </div>
    <div><b>Production:</b><span id="production"> 1 </span> $</div>
    <div>(Prod. per click)
    </div>
    <div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
  </div>
  <div class="item">
    <div class="line">
      <b>Lemonade stand</b>
    </div>
    <div class="line">
      <button id="countButton" style="padding: 2px;">
        <img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
      </button>
    </div>
    <div><b>Level:</b><span id="displayLevel"> 1 </span> 
      <img src="images/plus.png" id="buyLevel" width="20px" height="18px">
    </div>
    <div><b>Production:</b><span id="production"> 1 </span> $</div>
    <div>(Prod. per click)
    </div>
    <div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我已将item放在item-container内，您可以根据需要操纵父级的宽度来实现网格系统。

还要快速说明一下，如果你使用float看看什么是clearfix。 What is a clearfix?

答案 4 :(得分：0)

使用table，table-row，table-cell代表display divs

div容器不是垂直居中，只是水平放置......例如，您可以使用margin:100px auto; ....

JSFiddle example (not centered vertically :( )

答案 5 :(得分：0)

＆＃13;
＆＃13; 
.bloc {
  background: url(images/texture.png); 
  display: inline-block; 
  margin-left: auto; 
  margin-right:auto; 
  border: solid black 2px; 
  padding: 10px 
}

.bloc-title {
  padding-bottom: 7px;
  font-weight : bold;
  text-align : center;
}

.bouton-count {
  padding: 2px; 
}

.bloc-main-image {
  padding: 2px;
  width : 50px;
  height : 50px;
}

.bloc-level-name {
  font-weight : bold;
  color : brown;
}

.bloc-image-plus {
  width : 20px;
  height : 18px;
}

.bloc-production {
  font-weight : bold;
  color : green;
}

.bloc-prod-per-click {
  font-size : 15px; 
}

.bloc-level-price {
  color : red;
  font-weight : bold;
}

.custom-table {
  display : table;
  width : 100%;
}

.custom-cell {
  display : table-cell;
  vertical-align : middle;
}

.custom-cell-right {
  text-align : right; 
]
＆＃13; 
<div class="custom-table">
  <div class="custom-cell custom-cell-right">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
  <div class="custom-cell">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
</div>
<div class="custom-table">
  <div class="custom-cell custom-cell-right">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
  <div class="custom-cell">
    <div class="bloc">
      <div class="bloc-title">
        Lemonade stand
      </div>
      <div class="bloc-title">
        <button id="countButton" class="bouton-count">
          <img src="images/lemonade.png" class="bloc-main-image">
        </button>
      </div>
      <div>
        <span class="bloc-level-name">Level:</span>
        <span id="displayLevel">1</span>
        <img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
      </div>
      <div>
        <span class="bloc-production">Production:</span>
        <span id="production">1</span>
        $ 
      </div>
      <div class="bloc-prod-per-click">
        (Prod. per click)
      </div>
      <div>
        <span class="bloc-level-price">Level price:</span>
        <span id="pretlevel"> 0 </span> $ </div>
      </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我把你的css放了，我使用了2个div容器来模拟表行为。

在这里我＆＃34;打包＆＃34; 2 <div>中的bloc，其中一个CSS属性display : table呈现一个表行，而子<div>的属性display : table-cell呈现一个表格单元格。 / p>

相关问题
最新问题