獲取申報單一起玩

-1

似乎是一個非常簡單的解決辦法，但我的大腦一片空白......獲取申報單一起玩

代碼：

#content{ 
 
border: solid #d8d9da 1px; 
 
display:inline-block; 
 
float:left; 
 
background-color:#ffffff; 
 
border-radius: 4px; 
 
margin:5%; 
 
padding-bottom:20px; 
 
} 
 

 
.main_row{ 
 
background-color: PURPLE ; 
 
height:auto; 
 
min-height:50px; 
 
margin: 10px 10px 0px 10px; 
 
display:inline-block; 
 
float:left; 
 
} 
 

 
.row_content{ 
 
background-color: RED ; 
 
height:auto; 
 
min-height:50px; 
 
background-color:red; 
 
word-wrap: break-word; 
 
display:inline-block; 
 
float:right; 
 
} 
 

 
.thumbnail{ 
 
background-color: GREEN ; 
 
height:50px; 
 
width:100px; 
 
} 
 

 
.row_extra{ 
 
font-size:10px; 
 
}

\t <div id="content"> 
 

 
\t \t <div class="main_row"> 
 

 
\t \t \t <div class="thumbnail">IMG</div> 
 
\t \t \t <div class="row_content"> 
 
\t \t \t \t Reflection makeReflection makeReflection makeReflection makeReflection makeReflection make Reflection makeReflection makeReflection make 
 
\t \t \t \t <div class="row_extra">extra stuffhere</div> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t </div> 
 
\t 
 
\t </div>

我想要做什麼：

img總是停留在左側，紅色內容永遠不會移動到圖像的左側

它看起來像你的文章主要是代碼;請添加更多的細節。

來源

2015-05-30 DardanM

我已將display:table添加到父div，並將table-cell添加到childs而不是inline-block。

現在IMG將保持永遠留在紅慣於內容從未左移

.main_row{ 
background-color: PURPLE ; 
height:auto; 
min-height:50px; 
margin: 10px 10px 0px 10px; 
display:table; 
float:left; 
} 

.row_content{ 
background-color: RED ; 
height:auto; 
min-height:50px; 
background-color:red; 
word-wrap: break-word; 
float:right; 
    display:table-cell; 
} 

.thumbnail{ 
background-color: GREEN ; 
height:50px; 
width:100px; 
    display:table-cell; 
}

http://jsbin.com/pimotisoxi/3/edit

來源

2015-05-30 04:49:24 Prime

這很有趣我還沒有真正意識到添加'表屬性'而不實際使用表的想法。你知道他們有什麼缺點嗎？他們看起來非常有用 – DardanM

@DardanM，通過向div添加表屬性不會導致任何問題，Infact通過添加table-cell屬性可以減少佈局代碼。更多你可以在這裏閱讀。 https://css-tricks.com/almanac/properties/d/display/ – Prime

您可以隨時查看CanIuse，看它是否具有良好的瀏覽器支持。 http://caniuse.com/#feat=css-table – Damien

還有對皮膚有貓的方法不止一種，但你不應該使用內聯塊並漂浮。浮動嵌入塊會破壞內嵌文本上下文中的塊。如果你想對齊一個內聯塊，你應該在父容器上使用text-align:left。

這是一種方法（不使用內聯塊）。

#content{ 
 
border: solid #d8d9da 1px; 
 
/* display:inline-block; */ 
 
/* float:left; */ 
 
/* Defaults to normal block taking up 100% width */ 
 
background-color:#ffffff; 
 
border-radius: 4px; 
 
margin:5%; 
 
padding-bottom:20px; 
 
} 
 

 
.main_row{ 
 
background-color: PURPLE ; 
 
height:auto; 
 
min-height:50px; 
 
margin: 10px 10px 0px 10px; 
 
/* display:inline-block; */ 
 
float:left; 
 
} 
 

 
.row_content{ 
 
background-color: RED ; 
 
height:auto; 
 
min-height:50px; 
 
background-color:red; 
 
word-wrap: break-word; 
 
/* display:inline-block; */ 
 
/* float:right; */ 
 
/* Defaults to a normal block taking up 100% width */ 
 
margin-left: 100px; /* Add left-margin (visible below the thumbnail. */ 
 
} 
 

 
.thumbnail{ 
 
background-color: GREEN ; 
 
height:50px; 
 
width:100px; 
 
float:left; 
 
} 
 

 
.row_extra{ 
 
font-size:10px; 
 
}

\t <div id="content"> 
 

 
\t \t <div class="main_row"> 
 

 
\t \t \t <div class="thumbnail">IMG</div> 
 
\t \t \t <div class="row_content"> 
 
\t \t \t \t Reflection makeReflection makeReflection makeReflection makeReflection makeReflection make Reflection makeReflection makeReflection make 
 
\t \t \t \t <div class="row_extra">extra stuffhere</div> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t </div> 
 
\t 
 
\t </div>

來源

2015-05-30 05:02:33 ippi

這看起來不錯，只是讓內容類根據內容高度改變高度。我試圖設置高度：自動和最小高度搞亂，但無法讓它達到預算。該死的點擊進入空間，但它進入了評論 - 我也打算寫 - 最初我只有內聯塊，但增加了花車，試圖讓它與該工作 – DardanM

好吧，左浮動似乎做的伎倆 – DardanM

試試這個浮動兩個縮略圖& row_content類離開。將下面的代碼添加到您的css底部

.thumbnail, .row_content { 
     float: left; 
}

來源

2015-05-30 05:48:46

獲取申報單一起玩

回答

相關問題