對齊正確但不打破垂直對齊

Question

我仍然有很多麻煩，現在甚至很難描述問題。黃色文本區域應該在粉紅色div的邊緣（右側邊緣）右側，並且在此黃色區域div與左側的其他區域（包含綠色和紅色區域）之間應該有30px的邊距。

如果我添加的問題是固定的「浮動：右;」在'home-featured-class-3'中，但是這產生了將黃色文本區div移到頂部的新問題。

我怎樣才能讓黃文格浮動的權利，而且在中心上下浮動？ （無需調節任何事物的高度/寬度）

HTML & CSS：

.home-featured-class-3{ 
 
\t width: 630px; 
 
\t height:auto; 
 
\t margin:0 0 0 30px; 
 
\t display: inline-block; 
 
    vertical-align: middle; 
 
\t background:#CF0; 
 
} 
 
.home-featured-class-4{ 
 
\t width:298px; 
 
\t height:auto; 
 
\t margin:0 0px 0 0; 
 
\t border: 1px solid #211c20; 
 
\t display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.home-featured-class-A{ 
 
\t width:960px; 
 
\t height:auto; 
 
\t background:#C3C; 
 
\t vertical-align:middle; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
h6{ 
 
\t font-family:arial,verdana,helvetica,sans-serif; 
 
\t font-size:18px; 
 
\t color:#201c1f; 
 
\t text-decoration:none; 
 
\t text-transform:uppercase; 
 
\t font-weight:100; 
 
\t margin:0; 
 
\t padding:10px; 
 
\t background:#DB1D1D; 
 
\t text-align:center; 
 
\t border-top:1px solid #211c20; 
 
} 
 
h6 a:link{ 
 
\t color:#201c1f; 
 
\t text-decoration:none; 
 
} 
 
h6 a:visited{ 
 
\t color:#201c1f; 
 
\t text-decoration:none; 
 
} 
 
h6 a:hover{ 
 
\t color:#201c1f; 
 
\t text-decoration:underline; 
 
} 
 

 
#home-featured-classes-wrap{ 
 
\t width:auto; 
 
\t height:auto; 
 
\t margin: 30px 0 0 0; 
 
} 
 
.home-featured-class:hover .products { 
 
    text-decoration: underline; 
 
} 
 
.home-featured-class-end{ 
 
\t width:298px; 
 
\t height:auto; 
 
\t margin:0 0 0 0; 
 
\t border: 1px solid #211c20; 
 
\t float:left; 
 
} 
 
.home-featured-class-end:hover .products { 
 
    text-decoration: underline; 
 
}

<div id="home-featured-classes-wrap"> 
 

 
<div class="home-featured-class-A"> 
 
<div class="home-featured-class-4"><a href="products.html"><img name="RP-TEXT" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Color-Green.JPG" width="298" height="148" alt="RP-TEXT" style="background-color: #3366FF" /></a> 
 
<h6 class="products"><a href="products.html" title="RP-TEXT">RP-TEXT</a></h6> 
 

 
</div> 
 

 
<div class="home-featured-class-3">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div> 
 

 
<div class="clear"></div> 
 
</div> 
 

 

 

 
</div>

Answer 1

這是你的問題（在CSS註釋中描述）：

.home-featured-class-3{ 
    width: 630px; 
    height:auto; 
    margin:0 0 0 30px;  /* Here you set the margin to 30px on the left. */ 
    display: inline-block; 
    vertical-align: middle; 
    background:#CF0; 
    margin: 0;    /* Here you set it back to 0 again. Simply remove this line. */ 
} 

你也必須刪除換行符（或評論他們）超過<div class="home-featured-class-3">。 HTML引擎創建了一個額外的空白字符，因爲這個換行符讓你只有大約27px的空間而不是30px。你將不得不刪除這些換行符，以便能夠設置30px的距離。

這是你的HTML必須是什麼：

<div id="home-featured-classes-wrap"> 
    <div class="home-featured-class-A"> 
    <div class="home-featured-class-4"> 
     <a href="products.html"><img name="RP-TEXT" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Color-Green.JPG" width="298" height="148" alt="RP-TEXT" style="background-color: #3366FF" /></a> 
     <h6 class="products"><a href="products.html" title="RP-TEXT">RP-TEXT</a></h6> 
    </div><!-- 
    --><div class="home-featured-class-3">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div> 
    <div class="clear"></div> 
    </div> 
</div> 

JSFiddle。