[英]displaying a div content side by side
iam using a div contents .This div is repeating number of times showing output as我正在使用一个 div 内容。这个 div 重复显示输出的次数
2 any street basingstoke, United Kingdom, SP49 4ED 2 任何街道贝辛斯托克,英国,SP49 4ED
2 any street basingstoke, United Kingdom, SP49 4ED 2 任何街道贝辛斯托克,英国,SP49 4ED
like this .像这样 。 i need a display in side by side rather than displaying below.我需要并排显示而不是在下方显示。
.wfte_invoice-main {
color: #73879C;
font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 18px;
box-sizing: border-box;
width: 50%;
margin: 0px;
}
please give me a solution.请给我一个解决方案。 Thank you in advance.先感谢您。
according to what I have understand, maybe you can use display: flex
property and put your text in a paragraph tag like this:根据我的理解,也许您可以使用display: flex
属性并将您的文本放在一个段落标签中,如下所示:
<div class="your_container">
<p class="wfte_invoice-main">
2 any street basingstoke, United Kingdom, SP49 4ED
</p>
<p class="wfte_invoice-main">
2 any street basingstoke, United Kingdom, SP49 4ED
</p>
...
</div>
.your_container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
Link to the codesandbox: CodeSandbox代码 沙盒链接: CodeSandbox
A div is a block-element and block-elements are displayed below each others by default. div 是一个块元素,默认情况下,块元素显示在彼此的下方。
If you want to make them order in a row, just add如果你想让它们排成一排,只需添加
display: inline-block
to your div-class "wfte_invoice-main".到您的 div 类“wfte_invoice-main”。
Another way would be wrapping a flex-box-container around your two divs.另一种方法是在你的两个 div 周围包裹一个 flex-box-container。
<div class="wfte_invoice-container">
<p class="wfte_invoice-main">
2 any street basingstoke, United Kingdom, SP49 4ED
</p>
<p class="wfte_invoice-main">
2 any street basingstoke, United Kingdom, SP49 4ED
</p>
</div>
And add the following style:并添加以下样式:
.wfte_invoice-container {
display: flex;
}
You can edit the look of your container by adding values for justify-content and align-items.您可以通过为 justify-content 和 align-items 添加值来编辑容器的外观。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.