努力使用 p 标签不破坏文本

Question

我正在努力处理一些 HTML 和 CSS。我有一个带有两个 div 孩子的 div 标签。它们彼此相邻浮动（prop_img 和 prop_desc 供稍后参考）。左边的有一个固定的高度和宽度。右边的还有两个孩子。但它们彼此重叠（prop_text 和 prop_button）。最上面的有一个 h3 标签和一个 p 标签。底部有一个按钮。整个事物的宽度有最小和最大宽度。当我调整窗口大小时，p 标签应该包裹单词，这样它们就不会超出父级。我遇到的问题是，当 p 标签有足够的文本以至于它需要多于一行时，它只需要整个 div 标签 prop_desc 并将其放在 prop_img 下。我想要它做的是将单词换到下一行。

我尝试使用 wrap-word:break-word;和断词：break-all；我用谷歌搜索过，但只找到那些词很长而不是他们想打断的句子的人。

article {
  border: 1px solid black;
  padding: 0.5em;
  display: inline-block;
  width: 500px;
}

article:after {
  content: " ";
  display: block;
  clear: both;
}

.prop_img {
  float: left;
  text-align: center;
  position: relative;
  height: 150px;
  width: 200px;
}

.location {
  position: absolute;
  opacity: 0.6;
  left: 0;
  bottom: 0;
  width: inherit;
}

.location p {
  color: #000;
  background-color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  overflow: auto;
}

.prop_desc {
  float: left;
  margin-left: 0.5em;
  position: relative;
  height: 150px;
}

.prop_text {
  text-align: left;
}

.prop_text h3 {
  margin-top: 0;
}

.prop_button {
  position: absolute;
  right: 0;
  bottom: 0;
  outline-style: double;
}

.detail_button {
  background-color: blue;
}

.detail_button:hover {
  background-color: red;
}

<div class="container">
  <article>
    <div class="prop_img">
      <img src="image" height="150px" width="200px">
      <div class="location">
        <p>Location</p>
      </div>
    </div>
    <div class="prop_desc">
      <div class="prop_text">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l est laborum.</p>
      </div>
      <div class="prop_button">
        <input class="detail_button" type="button" name="Details" value="Details">
      </div>
    </div>
  </article>
</div>

Answer 1

我不确定我明白你的意思，但如果你想要图片右侧的文本，只需从其 div 中删除浮动，如下所示：

  .prop_desc{
     margin-left: 0.5em;
     position: relative;
     height: 150px;
    }

Answer 2

article(500px) 有固定宽度，.prop_img(200px) 有固定宽度。那么为什么不将.prop_desc 的宽度计算为（500 - 200 - .prop_img 和.prop_desc 的任何边距和边框>）。在你的情况下，它原来是 292px。

注意：您在代码中使用了不同的单位（em 和 px）。我会建议您使用单个单元以便于维护。

article {
  border: 1px solid black;
  padding: 0.5em;
  display: inline-block;
  width: 500px;
}

article:after {
  content: " ";
  display: block;
  clear: both;
}

.prop_img {
  float: left;
  text-align: center;
  position: relative;
  height: 150px;
  width: 200px;
}

.location {
  position: absolute;
  opacity: 0.6;
  left: 0;
  bottom: 0;
  width: inherit;
}

.location p {
  color: #000;
  background-color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  overflow: auto;
}

.prop_desc {
  float: left;
  margin-left: 0.5em;
  position: relative;
  height: 150px;
  width: 292px;
}

.prop_text {
  text-align: left;
}

.prop_text h3 {
  margin-top: 0;
}

.prop_button {
  position: absolute;
  right: 0;
  bottom: 0;
  outline-style: double;
}

.detail_button {
  background-color: blue;
}

.detail_button:hover {
  background-color: red;
}

<div class="container">
  <article>
    <div class="prop_img">
      <img src="image" height="150px" width="200px">
      <div class="location">
        <p>Location</p>
      </div>
    </div>
    <div class="prop_desc">
      <div class="prop_text">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l est laborum.</p>
      </div>
      <div class="prop_button">
        <input class="detail_button" type="button" name="Details" value="Details">
      </div>
    </div>
  </article>
</div>

Answer 3

你应该让 prop_desc 向右浮动而不是向左浮动并使用自动高度，我认为这就是你想要的。

或者

当它的大小超过 150 像素时，您可以使用overflow-y 滚动使其可滚动。

另外，尝试开始使用 cm 或 in 而不是 px，它们会为您提供更好的跨浏览器结果。