如何并排放置两个段落（彼此相邻）？

我有两个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

如何并排放置两个段落（彼此相邻）？

回答

相关问题