使用没有表格的CSS对齐标题

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的制作，并添加显示表/表单元格的元素，也可以用孩子的宽度占据父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; 
}