Question

我试图在它旁边的工厂显示信息，我想强制信息保持在植物图像的正确位置，只要屏幕具有特定的最小宽度。

问题是：如果信息包含的行比父div中剩余宽度空间的100％的正常宽度长，则信息div显示在图像下方。

线条长度良好的示例（无div换行）：https://jsfiddle.net/o3sjug9q/
行长太多的示例（div缠绕）：https://jsfiddle.net/seL72mt9/

如何强制详细信息div包装文本而不是将自己包装到下一行？

<div class="outer">
<div class="slidecontainer row" id="biodivslider" data-id="1">
<div class="sliderbtn nowrap" onclick="bwdpic()">&lt;</div>
<div class="wrap">
  <div class="detailimg"><img src="http://www.nachhaltiger-weinbau.net/wp-content/plugins/biodivslider/img/Milchsterne/Dolden-Milchstern_Ornithogalum_umbellatum-Tci_2004.jpg" class="detailimg"></div>
  <div class="details">
    <p><span class="detailslabel">Name:</span><br>Milchsterne</p>
    <p><span class="detailslabel">Lateinischer Name:</span><br>(Ornithogalum spec.), O. umbellatum, O. nutans</p>
    <p><span class="detailslabel">Standort:</span><br>mäßig trocken, sandig, Wärmezeiger, mäßig stickstoffreich</p>
  </div>
</div>
<div class="sliderbtn nowrap" onclick="fwdpic()">&gt;</div>
</div>

</div>

CSS：

div.outer {
  width: 833px;
  height: 491px;
  background: lightblue;
}
div.slidecontainer {
  max-height: 300px;
}

div.row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
  max-height: 300px;
}

div.row > div {
  float: none;
  display: table-cell;
  height: 100%;
  width: 100%;
}

div.row > div.wrap > div {
  float: left;
}
#
div.detailimg {
  height: 300px;
  width: 300px;
}

img.detailimg {
  display: block;
  max-height: 300px;
  max-width: 300px;
}

div.details {
  max-width: 100%;
  vertical-align: middle;
  word-wrap: break-word;
  overflow: visible;
}

span.detailslabel {
  font-size: smaller;
  font-weight: bold;
}

div.details > p {
  line-height: 90%;
  word-wrap: break-word;
  overflow: visible;
}

div.sliderbtn {
  font-size: 50px;
  font-weight: 900;
  min-height: 300px;
  height: 100%;
  width: 60px !important;
  line-height: 300px;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

Answer 1

https://jsfiddle.net/tjepuh1L/

1。）从overflow: visible;和div.details

中删除div.details > p

2.。）将div.details的最大宽度定义为calc(100% - 300px)

Answer 2

变化

div.details {
max-width: 100%;
vertical-align: middle;
word-wrap: break-word;
overflow: visible;
}

到

div.details {
max-width: 50%;
vertical-align: middle;
word-wrap: break-word;
overflow: visible;
}

如果您为图片使用不同的尺寸，请更改图片的CSS类中的最大宽度以及50％

对div和内容强制最大宽度为100％

2 个答案: