How to resolve float:right right-aligned elements in CSS wrap lines not on the same line

This article mainly introduces about how to solve the CSS in float:right right alignment elements will be wrapped not on the same line, has a certain reference value, now share to everyone, there is a need for friends can refer to

Using float to set the right-aligned display, we usually encounter, the right-aligned elements will be wrapped, so that the left and then the elements are not on the same line, the following for you to introduce the next two solutions, a similar situation of friends can refer to the next

CSS usually we need to put an element left, the right to display, this time we can be set according to the float, when the right to set the display, we usually encounter, right-aligned elements will be wrapped, so that there will be the left and then the element is not on the same line, we can solve the problem by the following ways:

The First solution: swap left and right, for example, put the date in front of the title, swap it out.

The Second solution: add Float:left to the left.

CSS float definition and usage

The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element.

If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

float constant with attribute value left, right, none
Float:none do not use floating
Float:left floating on the left
Float:right floating on the right

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!