Question

我是CSS新手，我正在尝试格式化新网站的标题。我在左边有一个我想要的徽标，后面有我想要的标题。我有这个工作得很好，但如果我收缩窗口，文字在徽标下面。我希望文本换行。我可以使用表格轻松完成这项工作，但据我所知，在页面布局中应避免使用表格。

这是HTML：

<div class="image margin-right-5"></div>
<h1><%= siteName %></h1>

CSS：

.image {
    height: 2em;
    width: 200px;
    display: inline-block;
    background: url(../Images/main-logo.png) no-repeat left center;
}

h1, h3 {
    display: inline-block;
    font-weight: normal;
    font-size: 1.875em;
    vertical-align: super;
}

这是一个缩小版本，显示我想要的但正在使用表格。 http://jsfiddle.net/1Lof58xd/

那么如何在不使用表格的情况下实现这一目标呢？

Answer 1

您在http://jsfiddle.net/1Lof58xd/4/

您可以使用div并将显示表/表格单元格添加到元素中，或者您可以使用子宽度来使其占据父格子100％宽度。

你可以检查解决方案的小提琴：）

HTML

<div class="full">
    <div class="half">
        <img class="hdrimage" src="https://www.google.com/images/srpr/logo9w.png" />
    </div>
    <div class="half">
         <h1>Responsive Title to Wrap</h1>
    </div>
</div>

<h2>Display Table</h2>
<div class="table">
    <div class="table-cell">
        <img class="hdrimage" src="https://www.google.com/images/srpr/logo9w.png" />
    </div>
    <div class="table-cell">
         <h1>Responsive Title to Wrap</h1>
    </div>
</div>

CSS

.full {
    width: 100%;
    overflow: hidden;
}
.half {
    width: 50%;
    float: left;
}
.hdrimage {
    max-width: 100%;
}

/* With Display table/table-cell */
.table{
    display: table;
    width: 100%;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}

使用CSS而不使用表格来对齐标题

1 个答案: