Question

好的，我有3个主要的div;灰色div是包装器，蓝色div位于左侧，Orange div位于右侧。蓝色div具有固定的宽度和高度。

我的问题是，当浏览器窗口调整大小时，如何在Orange div流体中制作TEXT？我不希望整个Orange div只是跳下蓝色div，我希望文本是流畅的。我如何实现这一目标？

感谢您的时间：）

这是一个JSFiddle链接https://jsfiddle.net/op4nnmb4/7/

.wrapper {
    position: absolute;
    max-width: 1200px;
    width: 100%;
    margin-left: 10px;
    background: #3c3c3c;
}

.leftimg{
    width:600px;
    height: 2900px;
    background: #8cceff;
    position: relative; 
    float: left;
}

.rightside {
    background: #F96;
    float: right;
    width: 50%;
    height: 100%;
}

.projectimg {
    width: 600px;
    position: relative; 
    float: left;
    margin-bottom: 50px;
}

.project-title {
    font-family: 'Abel';
    color: #FFF;
    float: left;
    margin-left: 40px;
    font-weight: 300;
    display: block;
}

.project-title .title1 {
    font-size: 2.5rem;
}
.project-title .title2 {
    font-size: 1.4em;
    clear: both;
    display:block;  
}

.context {
    float: left;
    color: rgba(255,255,255, 0.7);
    width: auto;
    margin: 20px 0 0 40px;
    display: block;
    position: relative;
}
.context p {
    font-size: 1.06rem;
    line-height: 1.6rem;
    font-family: 'Roboto Condensed';
    font-weight: 300;
}

Answer 1

当[窗口]调整大小时，如何制作...橙色div流体[宽度]？

将display: flex;添加到包装器将为任何没有设置宽度的元素提供流体宽度;

（Demo）

.wrapper {
    display: flex;
}

Flex布局在表面上类似于块布局。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮点数和列。作为回报，它获得了简单而强大的工具，用于分配空间并以Web应用程序和复杂网页通常需要的方式对齐内容。 flex容器的内容：



可以任何流向（左，向右，向下，甚至向上）布置。



可以在样式图层中反转或重新排列显示顺序（即，视觉顺序可以独立于源和语音顺序）



可沿单个（主）轴线性布局，或沿二级（十字）轴包裹成多行



可以“弯曲”其大小以响应可用空间



可以与其容器或彼此对齐



可沿主轴动态折叠或展开，同时保留容器的十字尺寸



http://www.w3.org/TR/css-flexbox-1/#overview

Answer 2

看看这个小提琴：https://jsfiddle.net/op4nnmb4/12/

.wrapper {
 display:table;
}
.leftimg, .rightside{
 display:table-cell;
}

Answer 3

如果您对IE8和4.4以下的机器人不满意，请使用Viewport Sized Typography。

这样，您可以让for(auto p : f.points)为视口大小的1％（窗口大小），如果使用font-size单位，则为水平，如果使用{{{} 1}}单位。更好的是，当视口大小改变时，文本会自动调整大小。

Answer 4

以下是使用float进行蓝/左图像面板的一种方法。

橙色/内容面板可以保留在流中（不浮动）。

我删除了很多令人困惑的无关属性，但是总的来说，这可能接近你所需要的。

您应该尝试使用语义标记，例如h1和h2，而不是更通用的span和类，以使其行为像块元素。< / p>

.wrapper {
  /* position: absolute; <-- You probably do not need this... */
  max-width: 1200px;
  width: 100%;
  margin-left: 10px;
  background: #3c3c3c;
  overflow: auto;  /* If you want the background color to show under all the image */
}
.leftimg {
  width: 300px;
  height: 600px;
  background: #8cceff;
  float: left;
}
.rightside {
  background: #F96;
  overflow: auto;
}
.project-title {
  font-family: 'Abel';
  color: #FFF;
  margin-left: 40px;
  font-weight: 300;
}
.project-title h1 {
  font-size: 2.5rem;
}
.project-title h2 {
  font-size: 1.4em;
}
.context {
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0 40px;
}
.context p {
  font-size: 1.06rem;
  line-height: 1.6rem;
  font-family: 'Roboto Condensed';
  font-weight: 300;
}

<div class="wrapper">
  <div class="leftimg">
    <span>I am an image</span>
  </div>
  <div class="rightside">
    <div class="project-title">
      <h1>I Am Main Title</h1>
      <h2>Sub title<h2>
        </div>
        <div class="context">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</div>

当浏览器调整大小时，如何在div内部生成文本？

4 个答案: