Question

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

Answer 1

这将有效，但当窗口宽度低于某个点时，文本将位于其他文本

之下

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

我会考虑使用类似Bootstrap的东西，而不是自己写一切

Answer 2

您我们缺少浮动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/

我还添加了自动换行，因此文本在段落

中断开

Answer 3

您似乎在寻找display: table-cell而不是float: left

试试这个：

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

并且还避免使用内联样式。

Answer 4

删除内联浮点数：向左并添加：

#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/

Answer 5

试试这个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;
}

Answer 6

这不是一件大事，只需使用简单的div结构和css就可以了

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

6 个答案: