如何並排放置兩個段落（彼此相鄰）？

我有兩個div容器由父div包裝。每個子div都包含帶標題的段落。如果我嘗試將這兩個段落（包括標題）在同一行中彼此相鄰對齊，則它們不會保留。他們只是分手，坐在其他人的下面。 如何讓它們彼此相鄰，並且頂部的邊距也相同？如何並排放置兩個段落（彼此相鄰）？

注意：我總是希望保留與第一段中演示中顯示的相同數量的文本。

HTML：

<div id="gallery-text"> 

    <div id="gallery-text-left" style="float:left"> 
    <p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b>I am not interested in shooting new things, I am interested to see things new.</b></p> 

    <p id="gallery-paragraph-1" style="font-family:Georgia"> 
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody 
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody 
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody 
    </p> 
    </div> 
    <div id="gallery-text-right" style="float:left"> 
    <p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>External photo albums</b></p> 
    <p id="gallery-paragraph-2" style="font-family:Georgia"> 
    <a>Link coming soon</a> 
    </p> 
    </div> 
</div>

.CSS：

#gallery-text-left{ 
} 
#gallery-paragraph-1{ 
border-left:8px solid #3CB371; 
border-radius:4px; 
padding-left:15px; 
} 
#gallery-paragraph-2{ 
border-left:8px solid #3CB371; 
border-radius:4px; 
padding-left:15px; 
} 
#gallery-text-right{ 
}

請有看看我的Demo.

來源

2015-05-29 Esha

這會起作用，但是當窗口寬度低於某一點的文字會去下其他文字

#gallery-text-left{ 
float:left; 
width:50% 
}

我會考慮使用類似引導，而不是把每件事寫自己

來源

2015-05-29 09:56:53 George

謝謝，這是有道理的。很快就會接受你的回答。 – Esha

接受@ VladNeacsu的回答，他更好 – George

你似乎在尋找的display: table-cell代替float: left

試試這個：

#gallery-text > div{ 
    display: table-cell; 
}

，也避免使用內嵌樣式。

來源

2015-05-29 09:59:04

我們錯過了浮動div的width屬性。我更新了你的小提琴。

#gallery-text-left{ 
    /* Added */ 
    width: 50%; 
} 
#gallery-paragraph-1{ 
    border-left:8px solid #3CB371; 
    border-radius:4px; 
    padding-left:15px; 
    /* Added */ 
    word-wrap: break-word; 
} 
#gallery-paragraph-2{ 
    border-left:8px solid #3CB371; 
    border-radius:4px; 
    padding-left:15px; 
} 
#gallery-text-right{ 
    /* Added */ 
    width: 50%; 
}

http://jsfiddle.net/v48tbqxx/1/

我還添加了自動換行這樣的段落文本中斷

來源

2015-05-29 09:59:25 VladNeacsu

你能告訴我更多的單詞包裝嗎？ – Esha

@Esha http://www.w3schools.com/cssref/css3_pr_word-wrap.asp – George

這只是因爲您的段落文本中沒有空格。但是從語義的角度來看，這個答案更好（對於段落使用display：table比僅限制寬度更有意義）。你應該學習你的CSS： https://developer.mozilla.org/en-US/docs/Web/CSS 我認爲這是學習屬性的最佳解決方案，它比其他更詳細。 – VladNeacsu

刪除內聯浮動：左和補充一點：

#gallery-text{ 
    display:table; 
} 

#gallery-text-left, #gallery-text-right{ 
    display:table-row; 
} 

#gallery-text-left > p, 
#gallery-text-right > p{ 
display:table-cell; 
}

http://jsfiddle.net/nseLmva8/

來源

2015-05-29 10:02:15 gopalraju

試試這個fiddle

#gallery-text-left{ 
    width:50% 
} 
#gallery-paragraph-1{ 
    border-left:8px solid #3CB371; 
    border-radius:4px; 
    padding-left:15px; 
    word-break: break-all; 
} 
#gallery-paragraph-2{ 
    border-left:8px solid #3CB371; 
    border-radius:4px; 
    padding-left:15px; 
}

來源

2015-05-29 10:02:20 stanze

這不是什麼大事情，只是用簡單的div結構和CSS就可以

.gallery-text { 
 
    float: left; 
 
    width: 48%; 
 
    margin: 1%; 
 
} 
 
.gallery-text p { 
 
    word-break: break-all; 
 
}

<div id="gallery-text"> 
 
    <div class="gallery-text"> 
 
     <h3> Header</h3> 
 
     <p> 
 
     BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
      BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
      BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
      BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
     </p> 
 
    </div> 
 
    <div class="gallery-text"> 
 
     <h3> Header</h3> 
 
     <p> 
 
     BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
      BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
      BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
      BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody 
 
     </p> 
 
    </div> 
 
</div>

來源

2015-05-29 10:05:11

如何並排放置兩個段落（彼此相鄰）？

回答

相關問題