Question

我有这样的代码：https://jsfiddle.net/qchtngzf/1/

现在，当浏览器太窄时，div.right（右边的文本）会跳到下一行。但是，我想，div.left（左边的文字）会变小，内部的文字会突破到下一行，而div.right会留在同一个地方。< / p>

我在这里发现了一个类似的问题：Making a div float left, but not "fall" if text is too long 但它有点不同，即使我做了一些改变，对我也没有用。

谢谢。

Answer 1

您应该为它们right and left类设置宽度：

＆＃13;

html, body, header, nav, footer, div, p, ul, li, a {
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 18px;
}
.left {
  width: 80%;
  float: left;
  position: relative;
} 
.right {
  width: 10%;
}
.clearfix:after {
	content: "";
	display: block;
 	clear: both;
}

hr {
	border: 0;
	height: 1px;
	background-color: #e9e9e9;
	margin: 16px 0;
}

section.body {
	max-width: 960px;
	min-width: 272px;
}

div.left {
	color: #1e344c;
	float: left;
}

div.left span {
	font-size: 14px;
	color: #666666;
}

div.right {
	float: right;
}

＆＃13;

<section class="body">
		<div class="item clearfix">
			<div class="left">
				text text text text text text text text text text text text text text 
			</div>
			<div class="right">text </div>
		</div>
		<hr>
		<div class="item clearfix">
			<div class="left">
				text text text text text text text text text text <br>
				<span>text text text text text </span>
			</div>
			<div class="right">text </div>
		</div>
		<hr>
		<div class="item clearfix">
			<div class="left">
				text text text text text text text text text 
			</div>
			<div class="right">text </div>
		</div>
		<hr>
		<div class="item clearfix">
			<div class="left">
				text text text text text <br>
				<span>text text text text text text text text text text text text text text text </span>
			</div>
			<div class="right">text </div>
		</div>
		<hr>
		<div class="item clearfix">
			<div class="left">
				text text text text text text text <br>
				<span>text text text text text text text </span>
			</div>
			<div class="right">text </div>
		</div>
		<hr>
		<div class="item clearfix">
			<div class="left">
				text text text text text text text text text <br>
				<span>text text text text text text </span>
			</div>
			<div class="right">text </div>
		</div>
	</section>

＆＃13;

Answer 2

你可以使用下面的css如果你想让右边的部分不包括在下一行而左边的部分缩短。

html, body, header, nav, footer, div, p, ul, li, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 18px;
}


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

hr {
    border: 0;
    height: 1px;
    background-color: #e9e9e9;
    margin: 16px 0;
}

section.body {
    max-width: 960px;
    min-width: 272px;
}

div.left {
    color: #1e344c;
  width
}
.item {
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
div.left span {
    font-size: 14px;
    color: #666666;
}

div.right {
    white-space:nowrap;
}

Answer 3

1）设置两个div的宽度

2）在“vh”中设置字体大小

3）无需设定位置：相对; div.left;

div.left{
width:90%;
font-size:2vh;
float:left;
}
div.right{
width:10%;
float:right;
}

Answer 4

实际上，这些答案的组合有所帮助。来自Teuta（https://stackoverflow.com/a/38073935/6522717）的那个问题是，如果屏幕太小而右边的内容大于设定的百分比，则文本会突破另一条线。通过将@media分配给white-space: nowrap，可以通过另一个div.right宽度或San发布（https://stackoverflow.com/a/38074311/6522717）来解决此问题。

非常感谢你们给出的答案，因为他们帮了很多忙。

在破坏下一行的浮动之前，在左侧打破文本

4 个答案: