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时，#用于表示其样式。只需将css中的.更改为#即可。这是working demo

Answer 2

因为默认div为display:block。使用display:inline-block将同时显示在同一行。

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

Fiddle

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中你已经放了＆＃39;。＆＃39;而不是＆＃39;＃＆＃39;到标题类＆＃39;。因为从你的html中我的观点来看，你已经使用过＆＃39; title＆＃39;作为一个＆＃39; id＆＃39;在css中，您可以使用＆＃39;＃＆＃39;

来应用样式

在那个css类中添加＆＃39; float：left＆＃39;属性。还会将您的图片和锚标记放入＆＃39; Div＆＃39;并添加样式＆＃39; float：left＆＃39;。

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来使它成为aline

希望这可以提供帮助

Answer 7

首先，你做错了，就像你使用了id ='title'和为'.title'类编写样式一样，因为它没有实现。如果你只是想把它放在一条线然后放 #title {float：left; } #bonus {float：left; } 在当前的样式中，＃title div和#bonus div占用了100％的宽度，这就是为什么不在一条线上。

CSS：display：inline-block没有正确对齐div

7 个答案: