浮动文本框

Question

我有一张图片，周围有一些文字。 ＆＃34;问题＆＃34;是响应式设计。以下是由灰色垂直线分隔的3个场景：

我目前有方案1.但如果只有一个单词被移动到全宽的第一行，它看起来很尴尬。

是否有可能将文本放在一些受保护的框中？＃34;这可以防止文本被撕裂？结果应该看起来像场景2.我确实可以使用一个包含2列的表来完成它，但是如果没有足够的空间，我希望文本在场景3中对齐。

如何使用html / css（没有javascript）？我需要一个Joomla主页。

Answer 1

您可以通过多种方式完成此操作，因为您显然是从float开始的，所以float就是这样的。

.first {
  float: left;
}
.second {
  float: left;
}

<div class="first">
  <img src="http://placehold.it/100/100" alt="">
</div>

<div class="second">
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
</div>

以下是display: inline-block的使用方法，我也建议使用float

.first {
  display: inline-block;
  vertical-align: top;
}
.second {
  display: inline-block;
}

<div class="first">
  <img src="http://placehold.it/100/100" alt="">
</div>

<div class="second">
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
  Here is some text<br>
</div>

更好的方式可能是flex，虽然旧浏览器不支持，但今天不应该是一个大问题

.container {
  display: flex;
  flex-wrap: wrap;
}
.first {
  flex: 0;
}
.second {
  flex: 1;
  min-width: 200px;
}

<div class="container">
  <div class="first">
    <img src="http://placehold.it/100/100" alt="">
  </div>

  <div class="second">
    Here is some text 
    Here is some text 
    Here is some text 
    Here is some text 
    Here is some text 
    Here is some text 
    Here is some text<br>
    Here is some text<br>
    Here is some text<br>
    Here is some text<br>
    Here is some text<br>
    Here is some text<br>
    Here is some text<br>
    Here is some text<br>
  </div>
</div>

Answer 2

只需创建两个包含div的列

<div class="column">
  <img />
</div>
<div>
  Here put your text
</div class="column">

您的基本样式应生成列：

.column {
    width:50;
    float: left;
 }

并在没有足够空间时添加媒体查询：

@media screen and (max-width: 640px) {
    .column {
        width: 100%;
        float: none;
    }

Answer 3

我会按照以下方式执行此操作

<div class="first-box">
  <img /> <!-- Image -->
</div>

<div class="second-box">
  Text Text Text Text Text Text Text Text Text 
</div>

这里有两列分为两个不同的div

下一篇：Css

.first-box{
    width: 50%;
    float: left;
}


.first-box img{
  width: 100%;
}


.second-box{
  width:50%;
  float: left;
  background-color: yellow;
}

我们在这里做的是将内容分成两个不同的div并给它们50％的宽度，这意味着它们将占据整个窗口的一半，即100％;然后我们将它们漂浮到左边，这样它们就可以相互粘在一起而不会彼此靠近。因为我们希望图像占据整个div，所以我们在.first-box img上使用了css样式，给它100％的宽度来拉伸以适应。

{{注意：为了显示背景颜色，我在第二个div上使用了background-color}}

在此处查找JSFiddle：Click here for Example