CSS：display：inline-block无法正确对齐div

Question

尽管我知道基本概念是正确的，但在使div正确对齐方面遇到了一些麻烦。

我想要的是使较大的div（绑定）在同一行上具有标题，红利和图像，但是当前红利显示在标题字段下方。 有任何想法吗？

有问题的CSS：

.bound
{
   position:relative;
   z-index:1000; 
   border-style:solid; 
   border-width:1px; 
   padding:1%; 
   border-color:#0f0f0f; 
   border-radius:6px;
}

.event 
{
   border-style:none; 
   width:100%; 
   height:70px; 
   line-height: 60px;
   position: relative;
}

.title
{
   display:inline-block !important;
   height:100%;
   width:30%;
   min-width:250px;
   position: relative;
}

.bonus
{
   display:inline-block !important;
   height:100%;
   width:15%;
   min-width:200px;
   text-align:center;
   position: relative;
}

#click
{
   position:absolute; 
   width:100%; 
   height:60px; 
   z-index: 1;
}

HTML的简化版本：

<div id="bound">
    <div id="event">
        <a href="title link"><span id="click"></span></a>
        <img src="files/image.png" align="right">
        <div id="title">
            <span style="font-size:150%; font-weight:bold;">Title</span>
        </div>
        <div id="bonus">
            <span style="font-size:150%; font-weight:bold; color:#32CD32;">Bonus</span>
        </div>
        <br />
    </div>
</div>

提前致谢。

Answer 1

嘿，有个小错误。 当在样式中使用id时，thern #用于引用其样式。 只是改变. 在CSS到# ，这将起作用。 这是工作演示

Answer 2

因为默认情况下div是display:block 。 使用display:inline-block将在同一行中显示两者。

#event > div {
    display: inline-block;
}

小提琴

Answer 3

使内联样式float:left到标题的跨度为：

<span style="font-size:150%; font-weight:bold;float:left">Title</span>

Answer 4

要将所有内容保持在一行中，只需添加（尽管不建议使用id进行样式设置）：

#event > *{
    float:left;
}

http://jsfiddle.net/3tbnstmq/1/

Answer 5

我认为您在CSS中输入了“。” 而不是“标题类”的“＃”。 因为从我的角度来看，在您的html中，您已将“标题”用作“ id”，而在CSS中，您可以使用“＃”应用样式。

在该CSS类中添加“ float：left”属性。 还将您的图片和锚标记放在“ Div”中，并为其添加样式“ float：left”。

Answer 6

替换为：

.title
{
   display:inline-block !important;
   height:100%;
   width:30%;
   min-width:250px;
   position: relative;
}

.bonus
{
   display:inline-block !important;
   height:100%;
   width:15%;
   min-width:200px;
   text-align:center;
   position: relative;
}

对此

#title
{

   height:100%;
   width:30%;
   min-width:250px;
   position: relative;
   float:left;
   border:solid blue 1px;
}

#bonus
{

   height:100%;
   width:15%;
   min-width:200px;
   text-align:center;
   position: relative;
   float:left;
   border:solid blue 1px;
}

它必须是“＃”而不是“。” 由于您尝试在两个div中对齐元素，并且在代码中使用了ID并添加了float以使其成直线

希望这可以帮助

Answer 7

首先，您在一些方面做错了，例如您使用id ='title'并为类'.title'编写了样式，因为它没有实现。 如果只想将其放在一行中，则将#title {float：left; } #bonus {float：left; }在当前样式中，＃title div和#bonus div的宽度为100％，这就是为什么不在一行中。