無法在此HTML代碼中創建第三列。這個怎麼做？

我正在嘗試編輯左側的圖像和右側的文本內容。在文本內容下方有一個按鈕。我正在嘗試使用width = percentage來創建第三列，我將把按鈕放入它和其他一些文本中。無法在此HTML代碼中創建第三列。這個怎麼做？

我已將我的代碼發佈到jsFiddle中以便更好地理解。

.blog-post { 
margin-bottom: 40px; 
padding-bottom: 40px; 
border-bottom: 1px solid #eee; 
}

更好的解釋

假設現在有兩列。第一個是圖片，第二個是文字。我想要做的是減少文本的寬度，這樣就可以讓我把創建的空間作爲第三欄。新列應該有按鈕。

來源

2014-02-28 EnexoOnoma

不清楚你想要什麼 – sanjeev

@sanjeev假設現在有兩列。第一個是圖片，第二個是文字。我想要做的是減少文本的寬度，這樣就可以讓我把創建的空間作爲第三欄。新列應該有按鈕。 – EnexoOnoma

您只需將h2和p包裝在一個div中並將按鈕包裝到另一個div中即可。併爲它們定義寬度併爲每個使用{float：left;}。

它肯定會奏效。

來源

2014-02-28 04:54:17 user2811041

我試過這個沒有運氣...... – EnexoOnoma

使用下面的身體，我兩次不派息舉行COL2和COL3

<body> 
           <!-- Start Post --> 
          <div class="blog-post standard-post"> 
           <!-- Post Content --> 

           <div class="post-content"> 

            <div class="post-type"><img src="http://img3.carmax.com/Images/4/01/9882401-3-5-3443371d.jpg"></div> 

            <div class='col2'> <!-- Placed another div for holding the 2 col --> 
             <h2><a href="#"> Mercedes S65 AMG 2014 Black </a></h2> 

             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
            </div> 
            <div class='col3'> <!-- Placed another div for holding the 3 col --> 
             <h2><a href="#"> Mercedes S65 AMG 2014 Black </a></h2> 
             <a class="main-button" href="#">Read More <i class="icon-right-small"></i></a> 
            </div> 

           </div> 


          </div> 

    </body>

添加以下CSS屬性

.col3{ 
     float: left; 
     width: 200px; /* Specify With as per as you requriement */ 
    } 

    .col2{ 
     float: left; 
     width: 800px; /* Specify With as per as you requriement */ 
    }

來源

2014-02-28 04:59:13 sanjeev

試試這個：

updated jsfiddle

我所做的是讓你的p：

display: inline-block; 
vertical-align: middle; 
width: 80%

，然後你一到：

width: auto; 
vertical-align: middle;

您可以垂直對齊到頂部，中部或底部取決於您的需要。這樣你可以改變列而不用另一個div。

但是，當然，更好的工作是用額外的div來包裹它們，這將會更加時尚和清潔。

來源

2014-02-28 05:50:24 draftdraft88

我剛剛在您的CSS中添加了2個新行，並在div中包裝了h2和p。

.post-type+ div{max-width:80%; display:inline-block;} 
.post-type~ a{display:inline-block; border:1px solid red;vertical-align:bottom;} 

margin-bottom: 40px; 
padding-bottom: 40px; 
border-bottom: 1px solid #eee; 
overflow:hidden; /*new line added*/ 

}

這裏是工作演示。 http://jsfiddle.net/cm9UC/60/

來源

2014-02-28 06:23:25

無法在此HTML代碼中創建第三列。這個怎麼做？

回答

相關問題