如何在一行中顯示 div 元素
[英]How can i Display div Elements in one row
問題描述
大家好，我想連續顯示 3 個元素。 我嘗試了以下代碼，但沒有正確顯示它們。
<div id="mainDiv" style="background-color:#f77f00; width:90%; margin-right:5%; margin-left:5%; margin-bottom:1%; margin-top:1%;" >
<div id="left" onclick="Deletefav(this)" style="display: inline; width:20%; float:left; ">'+
'<img style="display: inline;" src="" />
</div>'+
<div id="center" onclick="" style=" width:30%; display: inline;text-align: center; margin:10%;">
<p style="display: inline;"><font color="#fff" face="verdana" size="4">testing</font></p>
</div>
<div id="right" onclick="Callfav(this)" style="display: inline; width:20%; float:right;">
<img style="display: inline;" src="" />
</div>
</div>
它是這樣顯示的
我想像示例圖像一樣創建它
7 個解決方案
解決方案1
7 已采納 2014-05-22 07:02:19
為內部 div 提供顯示屬性inline-block ：
display:inline-block;
更新：
您需要設置具有jo will fix it ，因為其他 div 中包含圖像：
<div id="${id}" style=" background-color: #f77f00; width: 90%; margin-right: 5%; margin-left: 5%; margin-bottom: 1%; margin-top: 1%; " > <div id="${_id}" onclick="Deletefav(this)" style="background-color: #f77f00; float: left; width: 20%; display: inline-block" > <img style="" src="${del_image}" /> <font color="#fff" face="verdana" size="1">delete</font> </div> <div id="${_id}" onclick="" style="background-color: #f77f00; float: left; width: 50%; display: inline-block; height: 25px" > <font color="#fff" face="verdana" size="4">${name}</font> </div> <div id="${_id}" onclick="Callfav(this)" style="background-color: #f77f00; float: left; width: 20%; display: inline-block" > <img style="" src="${call_image}" /><font color="#fff" face="verdana" size="1">call</font> </div> </div>
解決方案2
2 2014-05-22 07:19:21
添加display: inline-block; 給孩子的div。
設置子 div 的高度：
- 可能性：設置所有子div的高度：
height: 20px /* or in %, em, etc */; - 可能性：設置子div的高度：
height: inherit;它給出了從父 div 到子 div 的高度
來自 W3Schools：
inherit 關鍵字指定屬性應從其父元素繼承其值。
inherit 關鍵字可用於任何 CSS 屬性和任何 HTML 元素。
解決方案3
0 2014-05-22 07:19:44
如果你想快速修復，那么你可以使用另一個元素clear:both; 財產：
'</div> <br style="clear:both; height:0;" />';
解決方案4
0
將高度添加到您的第二個未正確顯示的 div
<div id="${_id}" onclick="" style="height=40px; background-color:#f77f00; float:left; width:50%;">
<p style="">
<font color="#fff" face="verdana" size="4">${name}</font>
</p>
</div>
添加like style="height=40px; ..."
解決方案5
0 2014-05-23 06:53:55
在這里，我編寫了一些可能解決此問題的代碼（：
section > div { display: table-cell; width: 33%; text-align: center; background-color:#f77f00; text-align: center; vertical-align: middle; margin:10%; } section { display: table; width: 100%; margin:1%; }
<section style="background-color:#f77f00; text-align: center; vertical-align: middle;"> <div> <img style=" " src="http://i58.tinypic.com/16c9ulk.png" /> </div> <div> <p style=""><font color="#000" face="verdana" size="4">JO willl fix it </font> </p> </div> <div> <img style="" src="http://i59.tinypic.com/b4ddtu.png" /> </div> </section> <section style="background-color:#f77f00; text-align: center; vertical-align: middle;"> <div> <img style=" " src="http://i58.tinypic.com/16c9ulk.png" /> </div> <div> <p style=""><font color="#fff" face="verdana" size="4">JO willl fix it </font> </p> </div> <div> <img style="" src="http://i59.tinypic.com/b4ddtu.png" /> </div> </section>
解決方案6
0 2021-11-09 19:13:37
要在一行中顯示所有<div>元素，您可以嘗試：
display:'flex'
解決方案7
0 2022-07-20 20:45:06
body { margin: 0; padding: 0; } .container { margin: 25% 5%; display: inline-flex; column-gap: 10px; justify-content: center; align-items: center; width: 100%; } .container .child { border: 0 solid #000; padding: 5px; width: 40%; text-align: center; background-color: #ff0012; color: #ffffff; border-radius: 5px; }
<html> <body> <div class="container"> <div class="child"> <p>Some text</p> </div> <div class="child"> <p>Some more text</p> </div> <div class="child"> <p>Much more text</p> </div> </div> </body> </html>
如何使用 jquery 一個一個地顯示/顯示多個 div 元素？
[英]How to display/show multiple div elements one by one using jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何逐行顯示div元素
如何一次顯示一個元素？
如何一次使用 translateY 到連續的顯示元素？
如何使用 jquery 一個一個地顯示/顯示多個 div 元素？
如何在一個div中一個接一個地顯示元素？
如何顯示從一個 div 到另一個 div 的整行
單擊表行后如何在 ngfor 中顯示下一個元素？
如何將元素集包裝到div中？
需要幫助跨越<div>一行中的元素</div><div id="text_translate"><p>我想要這個網站： <a href="https://www.petzl.com/INT/en" rel="nofollow noreferrer">https://www.petzl.com/INT/en</a></p><p> 我想在一行或一行中顯示具有 3 個 div“服務”“培訓”和“商店”的中心文本。</p><p> 我嘗試了內聯塊、填充、邊距、浮動等，但也許我做錯了什么。</p><p> 如果我不使用這一行“place-content:center;” 它把它放在左邊有很多空間。</p><p> 我的網站鏈接：beta.edgrope.com</p><p> 請在下面找到代碼： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> <style>.image{ height: 800px; width: 100%; display: grid; place-content:center; justify-content:middle; color: white; font-size:30px; background-color: #; background-position: center; background-size: cover; }.training{ display:inline-block; padding-top: 50px; padding-right: 1500px; padding-bottom: 50px; padding-left: 1px; }.image>div { display: inline-block; width: 100px; }.image>div img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; display: inline-block; }.image>div span { position: relative; z-index: 1; cursor: pointer; display: inline-block; }.image>div span:hover+img { opacity: 1; display: inline-block; }.div{ dipslay } </style> <div class="image"> <div class="services"> <span class="services" onclick="window.location=''">Services</span> <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div> <div class="Training"> <span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span> <img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div> <div class="shop"> <span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span> <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div> </div></pre></div></div><p></p><p> ：</p></div>
在div中水平（一行）顯示元素
相關標簽