文本框的浮动

Question

我有一张图片，周围有一些文字。 "problem" 是响应式设计。以下是灰色垂直线分隔的 3 个场景：

我目前有场景1。但是如果只将一个单词全角移动到第一行看起来很尴尬。

是否可以将文本放在一些 "protected box" 中以防止文本被撕裂？结果应该看起来像场景 2。当然我可以使用带有 2 列的 table 来做到这一点，但是如果没有足够的 space.[=，我希望文本像场景 3 一样对齐。 11=]

如何仅使用 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;
 }

并在没有足够的时候添加一个媒体查询space:

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

在这里，您将两列分成了两个不同的 divs

下一个：Css

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


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


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

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

在此处查找 JSFiddle：Click here for Example

文本框的浮动

Floating of text-boxes

html

css

floating