Question

问题是我的div被包含图片和一些文本的边框所包围。当我更改浏览器窗口的大小时，除文本外，其他所有内容均保持不变。它超越了边界。视频也一样。如何解决？

HTML：

<div class='banners wow fadeInLeft'>
        <a href='https://link' target='_blank'>
          <img id='left-img' src="images/1.jpeg" alt="Picture" title="Picture">
        </a>
        <p id='right-txt'>
         Advanced extended doubtful he he blessing together. Introduced far law gay considered frequently entreaties difficulty. Eat him four are rich nor calm. By an packages rejoiced exercise. To ought on am marry rooms doubt music. Mention entered an through company as. Up arrived no painful between. It declared is prospect an insisted pleasure. 

Same an quit most an. Admitting an mr disposing sportsmen. Tried on cause no spoil arise plate. Longer ladies valley get esteem use led six. Middletons resolution advantages expression themselves partiality so me at. West none hope if sing oh sent tell is. <br>
              <a href="https://ru.wikipedia.org/wiki/link"
              target="_blank">
                <img id='wiki' class='div-logos' src="images/wiki-logo.png" alt="Wikipedia" title='Go to Wiki'>
              </a>
            </p>
          </div>

CSS：

.banners {
border: 3px solid black;
height: 220px;
margin: 20px;
margin-right: 55%;
}

#left-img {
  width: 27%;
  padding: 10px;
}

#right-txt {
  width: 70%;
  float: right;
}


#wiki {
  float: right;
  padding-right: 5px;
}

如何解决？

Answer 1

基本上，您想使div具有响应性，请尝试使用@media规则

@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多内容，例如：

1-视口的宽度和高度

2-设备的宽度和高度

3方向（平板电脑/手机处于横向还是纵向模式？）分辨率

尝试使用媒体查询技术更改文本和视频的大小，对媒体规则css进行一些研究，以使布局具有响应性。

Answer 2

您可以使用flexbox来解决此问题。我相信看起来像这样

.div-container {
  display: flex;
  flex-wrap: wrap;
}

Answer 3

您可以添加“断字”属性以包含文本，而不管其宽度如何。

#mydiv {
border: 3px solid black;
height: 220px;
margin: 20px;
margin-right: 55%;
word-break:break-word;
}

Answer 4

将空白更改为正常

#mydiv {
    white-space: normal;
    border: 3px solid black;
    height: 220px;
    margin: 20px;
    margin-right: 55%;
}

更改窗口大小时，文本超出了div的边框

4 个答案: