Question

<style>
#stitched {
   padding: 20px;
   margin: 10px;
   background: grey;
   width: 300px;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px grey, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px grey;
   font-weight: normal;
}
</style>

<body>
<td class="thead"><span class="smalltext"><strong>Player Control Panel</strong></span></td>
<tr>
<td class="trow1">

	<h1 style="font-size: 35px; text-align: center;">Player Control Panel</h1>
	
	<div id="stitched">
		<i class="fa fa-plus fa-5x" style="text-align: center;"></i>
		<h2 style="text-align: center;">Create your new character account</h2>
	</div>
	
	<div id="stitched">
		<i class="fa fa-trash-o fa-5x" style="text-align: center;"></i>
		<h2 style="text-align: center;">Delete your existing character account</h2>
	</div>
</td>

前面提到的是我的代码。当你运行代码片段时，如果你得到的话，这些盒子往往会出现在彼此之下。你怎么做到这样盒子将留在一个区域而不是下降？像http://i.imgur.com/8O6HwmX.png一样。我试图在MyBB环境中实现我的目标（具有论坛自己的默认未编辑类和自定义的自定义页面）。我曾尝试弄乱宽度和位置，但无济于事。谢谢。如果这些信息有任何帮助，我也会使用Font Awesome。

Answer 1

Div是块级元素。它占据了全宽。所以下一个div总是放在它下面。

将display:inline-block;添加到#stitched会将其浮动到另一个。

以下是解释其使用的链接： http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

Answer 2

如果你为你的css添加display: inline-block;，那就可以了。

这使元素显示在一行中，并且尊重元素的大小。

所以只是display: inline;无法正常工作，它会使div的大小变得疯狂，如下所示。

但你不应该给予两个相同的id元素。该值在文档中应该是唯一的。您可以用类名替换它。

Answer 3

使用：显示：内联块;
并设置响应宽度宽度：40％;

＆＃13;

#stitched {
  display: inline-block;
  margin: 10px;
  background: grey;
  width: 40%;
  color: #fff;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 4px grey, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
  text-shadow: -1px -1px grey;
  font-weight: normal;
}

＆＃13;

<body>
  <td class="thead"><span class="smalltext"><strong>Player Control Panel</strong></span>
  </td>
  <tr>
    <td class="trow1">

      <h1 style="font-size: 35px; text-align: center;">Player Control Panel</h1>

      <div id="stitched">
        <i class="fa fa-plus fa-5x" style="text-align: center;"></i>
        <h2 style="text-align: center;">Create your new character account</h2>
      </div>

      <div id="stitched">
        <i class="fa fa-trash-o fa-5x" style="text-align: center;"></i>
        <h2 style="text-align: center;">Delete your existing character account</h2>
      </div>
    </td>

＆＃13;

Answer 4

为两个div提供相同的ID并不是一个好主意。我给你的第二个div一个单独的id。另外inline-block

＆＃13;

body{width:100%}
#stitched, #stitched2 {
   display:inline-block;
   padding: 20px;
   margin: 10px;
   background: grey;
   width: 300px;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px grey, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px grey;
   font-weight: normal;
}
h1{font-size:35px; text-align:center;}
h2{text-align:center;}
h3{font-size:small;}

＆＃13;

<body>
    <h3>Player Control Panel</h3>
	<h1>Player Control Center </h1>
	
	<div id="stitched">
		<i class="fa fa-plus fa-5x" style="text-align: center;"></i>
		<h2>Create your new character account</h2>
	</div>
	
	<div id="stitched2">
		<i class="fa fa-trash-o fa-5x" style="text-align: center;"></i>
		<h2>Delete your existing character account</h2>
	</div>
</body>

＆＃13;

防止div框自动间距

4 个答案: