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;和断言：打破一切;我用谷歌搜索，但只会让那些长话而不是句子的人想要打破。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我不确定我明白你的意思但是如果你想要图片右边的文字，只需从它的div中删除浮点数，就像这样：

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

Answer 2

s1 = 'one two three four' s2 = 'five six seven eight' m = re.search('^five', s1 + '\n' + s2, re.MULTILINE)（500px）的固定宽度和article（200px）的固定宽度。那么为什么不将.prop_img的宽度计算为（500 - 200 - ＆lt; .prop_desc和.prop_img＆gt;的任何边距和边框）。在你的情况下，结果是292px。

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

＆＃13;

px

＆＃13;

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

＆＃13;

Answer 3

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

或者

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

此外，尝试开始使用cm或代替px，它们可以为您提供更好的跨浏览器结果。

使用p标签进行拼写不会破坏文本

3 个答案: