是否有一種更簡潔的方式來實現2個對齊的列，文本/圖像？

Question

我對編程非常陌生，我想知道是否有一種更簡單的方法實現這一點：左側的文本框和右側的圖像都對齊。我添加了一個填充頂部來說明導航菜單。我可以用較少的代碼行完成此操作嗎？

<div class="intro"> 
    <div id="text"> 
     <h2 id="head">Quiénes Somos</h2> 
     <p id="info"> text text text text</p> 
    </div> 

    <div id="image"> 
     <img id="obj" src="images/pyme.jpg"> 
    </div> 
</div> 

這裏的CSS：

.intro { 
    text-align: center; 
    padding-top: 135px; 
} 

.intro #text { 
    vertical-align: top; 
    width: 40%; 
    display: inline-block; 
    padding: 10px; 
    border: 1px solid black; 
} 

.intro #text #head { 
    background-color: #d45029; 
    text-align: left; 
    border-radius: 7px; 
} 

.intro #text #info { 
    margin-top: 10px; 
    text-indent: 50px; 
    text-align: justify; 
} 

.intro #image { 
    width: 40%; 
    display: inline-block; 
    padding:10px; 
    border: 1px solid black; 
} 

.intro #image #obj { 
    max-width: 100%; 
} 

而這裏的小提琴link。我讀過使用花車會容易得多，但我試過並失敗了。任何幫助將不勝感激。

Answer 1

我通常使用百分比，顯示：塊和浮動這東西。然後我根據我想要做的事情調整邊距和填充。

HTML

<div class="divs-wrapper"> 
    <div class="div-1"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum lectus, id tristique elit. Integer tincidunt sollicitudin magna a congue.</p> 
    </div> 
    <div class="div-2"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum lectus, id tristique elit. Integer tincidunt sollicitudin magna a congue.</p> 
    </div> 
</div> 

CSS

.divs-wrapper { 
    width: 80%;/* width of wrapper */ 
    display: block;/* display block allows margin and width setting */ 
    margin: 0 auto;/* centers wrapper in 100% width body */ 
} 

.div-1 { 
    width: 49%;/* div 1 half width of wrapper */ 
    display: block;/* display block allows floats */ 
    float: left;/* float left to allow alignment of elements next to eachother */ 
    padding: .5%;/* padding for spacing */ 
} 

.div-2 { 
    width: 49%;/* div 2 half width of wrapper */ 
    display: block;/* display block allows floats */ 
    float: left;/* float left to allow alignment of elements next to eachother */ 
    padding: .5%;/* padding for spacing */ 
} 

我演示 https://codepen.io/rw1982/pen/eWwZjB

如果你是新的HTML和CSS，並且要開設專欄或網格在響應層面上工作。嘗試這些鏈接開始。

響應電網 http://www.responsivegridsystem.com/

Answer 2

divs默認爲display: block，這意味着它們將拉伸它們的容器的全部寬度，除非它們的寬度被指定（或者您將display更改爲其他內容）。

如果你想使用float風格，你需要採取的所有內容進行單獨申報單，這將離開你是這樣的：

<div class="intro"> 
    <img style = "float: right; max-width: 50%" id="obj" src="http://i.imgur.com/8EL2PCM.jpg"> 
    <h2 id="head">text text</h2> 
    <p id="info"> text text text text text text</p> 
</div> 

因爲p和img是內嵌在默認情況下，他們不不會佔用比他們需要更多的空間。請注意，我已將樣式設置爲內嵌圖像。你可以將它們移動到你的樣式表來獲得相同的效果。圖像默認情況下會以其實際尺寸進行渲染，這就是爲什麼我將max-width設置爲50％。如果您使用的圖像的大小已經達到您想要渲染的大小，則不需要執行此操作。

如果要在所有文字上應用樣式，而不是div，請將文字包裝在span（默認爲display: inline元素）中。或者只是給你的p標籤類或ID。這些也是display:inline。