Question

我需要什么（橙色日期对齐）：

我有什么：

（添加代码，因为不允许使用jsfiddle）

HTML：

<div class="Box1"><a href="#">
                           <img src="http://imgur.com/CAcW4Yw.jpg">
                               <div class="txtBox1"><h2>2014 02 16</h2><h6>vilniaus KM laimėjo  prieš aisčius - <br> kristupas totoris pataikė tris tritaškius</h6></div></a> 
                     </div

CSS：

h6{
        display:inline-block;
        padding:0;
        margin:25px 0 10px 25px;
        font-size:24px;
        font-weight:400;

        text-transform:uppercase;
        color:rgb(230,230,230);

    }

    h2{
        display:inline;
        text-transform:uppercase;
        padding:0;
        margin:0px 0 10px 30px;
        font-size:13;
        font-weight:bold;
        color:#e6540c;
    }

.txtBox1{
        position: absolute;
        height: 140px;
        width: 100%;
        background:url(http://imgur.com/c9KcXjv.jpg);
        bottom: 0; 

    }


    .Box1{

        float:left;
        width: 703px;
        height: 589px;  
        overflow: hidden;
        position: relative;
        margin: 0px 0px 15px 0px;
        border-radius: 5px;

    }

我是否必须再次使用盒子和绝对位置？还是有一些简单的垂直对齐方法？

Answer 1

保持HTML清洁。关闭所有标签。

<div class="Box1">
    <a href="#">
        <img src="http://imgur.com/CAcW4Yw.jpg" />
        <div class="txtBox1">
            <h2>2014 02 16</h2>
            <h6>
                vilniaus KM laimėjo prieš aisčius - <br />
                kristupas totoris pataikė tris tritaškius
            </h6>
        </div>
    </a>
</div>

我不主张这样做，但如果对齐顶部失败，那么强迫你的定位。

注意：我添加了边框，以便您可以看到H2和H6占用的空间。

h6 {
    display: inline-block;
    padding: 0px;
    margin: 25px 0px 10px;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    color: #E6E6E6;
    border: 1px solid #FFF;
    top: 0px;
    position: absolute;
    left: 120px;
}
h2 {
    display: inline-block;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px 0px 10px;
    font-weight: bold;
    color: #E6540C;
    border: 1px solid #FFF;
    top: 25px;
    position: absolute;
}

将你的定位标签分解为div更好，并使用H1-h6进行文本格式化。然后，您不必担心本机格式的冲突，而您正试图这样做。

Answer 2

为标题标记添加了一些宽度，并为其提供了float: left和float: right

Here is a live jsfiddle

Answer 3

在h2上

vertical-align:top，使用margin-top

进行调整

HTML + CSS两个标题彼此相邻，文本垂直对齐

3 个答案: