මට සමාන පිරිසැලසුමක් ඇත:
<div>
<table>
</table>
</div>
මගේ div
කැමැත්ත තරම් පුළුල් වීමට පමණක් මම කැමතියි table
.
මට සමාන පිරිසැලසුමක් ඇත:
<div>
<table>
</table>
</div>
මගේ div
කැමැත්ත තරම් පුළුල් වීමට පමණක් මම කැමතියි table
.
Answers:
විසඳුම ඔබේ div
සැකසුමයි display: inline-block
.
span
හෝ a div
හෝ ul
වෙනත් දෙයක් භාවිතා කළ හැකිය , වැදගත් කොටස වන්නේ අවම පළල වීමට ඔබ කැමති කන්ටේනරය සඳහා CSS දේපලdisplay: inline-block
display: inline-block
දේපල සැකසූ පසු margin: 0 auto;
බලාපොරොත්තු වූ පරිදි ක්රියාත්මක නොවන බව කරුණාවෙන් සලකන්න . එවැනි අවස්ථාවකදී මව් බහාලුම තිබේ text-align: center;
නම් inline-block
මූලද්රව්යය තිරස් අතට කේන්ද්රගත වේ.
inline-block
මට වැඩ කළේ නැහැ, නමුත් inline-flex
කළා.
ඔබට අවශ්ය වන්නේ බ්ලොක් මූලද්රව්යයක් වන අතර එය CSS ලෙස හඳුන්වන පළල හැකිලීමට සරිලන පළලක් වන අතර පිරිවිතර එවැනි දෙයක් ලබා ගැනීමට ආශීර්වාද ලත් ක්රමයක් සපයන්නේ නැත. CSS2 හි, හැකිලීම-ගැලපීම ඉලක්කයක් නොවේ, නමුත් එයින් අදහස් කරන්නේ බ්රව්සරයට සිහින් වාතයෙන් පළලක් ලබා ගත යුතු තත්වයක් සමඟ කටයුතු කිරීමයි. එම තත්වයන් නම්:
පළල නිශ්චිතව දක්වා නොමැති විට. CSS3 හි ඔබට අවශ්ය දේ එකතු කිරීමට ඔවුන් සිතන බව මට අසන්නට ලැබුණි. දැනට, ඉහත එකක් සමඟ කරන්න.
විශේෂාංගය කෙලින්ම නිරාවරණය නොකිරීමට ගත් තීරණය අමුතු බවක් පෙනෙන්නට තිබුණත් හොඳ හේතුවක් තිබේ. එය මිල අධිකයි. හැකිලීම-ගැලපීම යන්නෙන් අදහස් කරන්නේ අවම වශයෙන් දෙවරක්වත් ආකෘතිකරණය කිරීමයි: මූලද්රව්යයක පළල දැන ගන්නා තෙක් ඔබට එය ආකෘතිකරණය කිරීම ආරම්භ කළ නොහැකි අතර සම්පූර්ණ අන්තර්ගතය හරහා යන පළල ගණනය කළ නොහැක. තවද, කෙනෙකුට සිතිය හැකි සෑම විටම හැකිලීමට-ගැලපෙන අංගයක් අවශ්ය නොවේ. ඔබේ මේසය වටා අමතර බෙදීමක් අවශ්ය වන්නේ ඇයි? සමහර විට මේස ශීර්ෂ පා you ය ඔබට අවශ්ය වනු ඇත.
inline-block
හරියටම මේ සඳහා අදහස් කර ඇති අතර ගැටලුව පරිපූර්ණ ලෙස විසඳයි.
content-box, max-content, min-content, available, fit-content, auto
fit-content
මූල පදය (මෙම පිළිතුර මුලින්ම ලියන විට නොපවතින අතර තවමත් පූර්ණ සහය නොදක්වයි ) මූලද්රව්යයකට “හැකිලීමට-ගැලපෙන” ප්රමාණය පැහැදිලිව යෙදීමට ඔබට ඉඩ සලසයි, ඔබ මෙහි යෝජනා කර ඇති ඕනෑම හක්කයක අවශ්යතාවය ඉවත් කරයි. ආධාරයෙන් බ්රව්සර් පමණක් ඉලක්ක කිරීමට තරම් වාසනාවන්තයි. +1 එසේ වුවද; මේවා දැනට ප්රයෝජනවත් වේ!
float
මට කරන්න අවශ්ය දේ කළා!
මම හිතන්නේ පාවිච්චි කරනවා
display: inline-block;
කෙසේ වෙතත්, බ්රව්සර් අනුකූලතාව ගැන මට විශ්වාස නැත.
තවත් විසඳුමක් වනුයේ ඔබේ div
තවත් තැනකට ඔතා div
ගැනීමයි (ඔබට වාරණ හැසිරීම පවත්වා ගැනීමට අවශ්ය නම්):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
*display: inline; *zoom: 1;
. මෙම විශේෂිත තත්වය සඳහා මම පරීක්ෂා කර නැත, නමුත් හැව්ලයිට් හැක් අවශ්ය වන්නේ IE7 සඳහා හෝ IE7 මාදිලියේ IE7 සඳහා පමණක් බව මම අතීතයේ දී සොයාගෙන ඇත්තෙමි (හෝ IE8 quirks!).
inline-block
IE 7 හි සක්රීය කර ඇති ක්රියාමාර්ගයකි.
display: inline-block
ඔබේ මූලද්රව්යයට අමතර ආන්තිකයක් එක් කරයි.
මම මෙය නිර්දේශ කරමි:
#element {
display: table; /* IE8+ and all other modern browsers */
}
බෝනස්: ඔබ ද දැන් ඉතා පහසුවෙන් බව විසිතුරු නව මධ්යස්ථානය හැකි #element
පමණක් එකතු කිරීම මඟින් margin: 0 auto
.
position: absolute
<IE8 සඳහා කොන්දේසි සහිත අදහස් දැක්වීමක් අවශ්ය වේ.
display: inline-block
කිසිදු ආන්තිකයක් එකතු නොවේ. නමුත් සීඑස්එස් විසින් පේළිගත කළ හැකි මූලද්රව්ය අතර පෙන්වීමට සුදු අවකාශය හසුරුවයි.
position: absolute
ඔබට උත්සාහ කළ හැකිය fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
මට වැඩ කරන්නේ:
display: table;
දී div
. ( ෆයර්ෆොක්ස් සහ ගූගල් ක්රෝම් හි පරීක්ෂා කර ඇත ).
border-collapse: separate;
ශෛලිය සකස් කළ යුතු බව සලකන්න . එය බොහෝ බ්රව්සර් වල පෙරනිමිය වන නමුත් බොහෝ විට css රාමු වල අගය නැවත සැකසීම collapse
.
වඩා හොඳ විසඳුම් දෙකක් තිබේ
display: inline-block;
හෝ
display: table;
මේ දෙකෙන් display:table;
වඩා හොඳය, මන්ද display: inline-block;
අමතර ආන්තිකයක් එකතු වන බැවිනි .
display:inline-block;
අමතර ඉඩ නිවැරදි කිරීම සඳහා ඔබට negative ණ ආන්තික ක්රමය භාවිතා කළ හැකි බැවිනි
display:table
වඩා හොඳ වීමට හේතුව පැහැදිලි කිරීමට ඔබට අවශ්යද?
display:table
බ්ලොක් හැඩතල ගැන්වීමේ සන්දර්භය තුළ මූලද්රව්යය තබයි, එවිට ඔබට සුපුරුදු පරිදි ආන්තිකය සමඟ එහි පිහිටීම පාලනය කළ හැකිය. display:-inline-*
, අනෙක් අතට, මූලද්රව්යය පේළිගත කිරීමේ හැඩතල ගැන්වීමේ සන්දර්භයට ඇතුළත් කරන අතර, බ්රව්සරය එය වටා නිර්නාමික බ්ලොක් එතුම නිර්මාණය කිරීමට හේතු වන අතර, උරුම වූ අකුරු / රේඛා-උස සැකසුම් සහිත රේඛා කොටුව අඩංගු වන අතර, එම රේඛා කොටුවට බ්ලොක් ඇතුල් කරන්න (පෙළගැස්වීම) එය පෙරනිමියෙන් මූලික වශයෙන් සිරස් අතට). මෙයට වැඩි "මැජික්" ඇතුළත් වන අතර එබැවින් විභව විස්මයන්.
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
ෆූ හැක් - ඉන්ලයින්-බ්ලොක් ස්ටයිලිං සඳහා හරස් බ්රව්සර් සහාය (2007-11-19) .
-moz-inline-stack
දේ සන්දර්භය තුළ නොදැන මෙම දිස් වනු ඇත, නමුත් මම CSS ආකාරයේ දේපල විශ්වාස float
එක්කෝ left
හෝ right
මෙම බලපෑමක් ඇති කරනු ඇත. අනෙක් අතට, එය පෙළ වටා පාවීමට ඉඩ දීම වැනි වෙනත් අතුරු ආබාධ ද ඇති කරයි.
මම වැරදියි නම් කරුණාකර මාව නිවැරදි කරන්න, මට 100% ක් විශ්වාස නැත, දැනට එය මා විසින්ම පරීක්ෂා කළ නොහැක.
ඔබේ ප්රශ්නයට පිළිතුර අනාගතයේ මගේ මිතුරා ...
එනම් "අභ්යන්තර" නවතම CSS3 යාවත්කාලීනය සමඟ පැමිණේ
width: intrinsic;
අවාසනාවට IE එය පසුපසින් සිටින බැවින් එය තවමත් එයට සහාය නොදක්වයි
ඒ ගැන වැඩි විස්තර: CSS අභ්යන්තර සහ බාහිර ප්රමාණයේ මොඩියුල මට්ටම 3 සහ මට භාවිතා කළ හැකිද? : අභ්යන්තර සහ බාහිර ප්රමාණකරණය .
දැන් ඔබට සෑහීමට පත් විය යුතු <span>
හෝ <div>
සකසා
display: inline-block;
intrinsic
අගය සම්මත නොවන බැවින්. එය ඇත්ත වශයෙන්ම ය width: max-content
. එහි හෝ දැනටමත් සම්බන්ධ කර ඇති කෙටුම්පතේ MDN පිටුව බලන්න .
width:1px;
white-space: nowrap;
මට හොඳින් වැඩ කරයි :)
CSS2 අනුකූල විසඳුමක් භාවිතා කිරීම:
.my-div
{
min-width: 100px;
}
ඔබට හැකි තරම් කුඩා ප්රමාණයක් බලහත්කාරයෙන් පාවීමටද පුළුවන, නමුත් ඔබේ කොට් within ාශය තුළ යමක් පාවෙමින් තිබේ නම් ඔබට පැහැදිලි විසඳුමක් භාවිතා කිරීමට අවශ්ය වනු ඇත :
.my-div
{
float: left;
}
හරි, බොහෝ අවස්ථාවන්හීදී ඔබට පෙරනිමියෙන් height
හා width
ස්වයංක්රීයව කිසිවක් කිරීමට අවශ්ය නැත , නමුත් එය ඔබගේ කාරණය නොවේ නම්, inline-block
දර්ශනය යෙදීම ඔබ වෙනුවෙන් වැඩ කරයි ... මම ඔබ වෙනුවෙන් නිර්මාණය කරන කේතය දෙස බලන්න, එය එසේ වේ ඔබ සොයන දේ:
div {
display: inline-block;
}
<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>
මෙය අදහස් දැක්වීම්වල සඳහන් කර ඇති අතර එක් පිළිතුරකින් සොයා ගැනීම දුෂ්කර ය:
ඔබ display: flex
කුමන හේතුවක් නිසා හෝ භාවිතා කරන්නේ නම් , ඔබට ඒ වෙනුවට භාවිතා කළ හැකිය:
div {
display: inline-flex;
}
ඔබට inline-block
@ user473598 ලෙස භාවිතා කළ හැකිය, නමුත් පැරණි බ්රව්සර් වලින් පරිස්සම් වන්න ..
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
මොසිල්ලා ඉන්ලයින්-බ්ලොක් සඳහා කිසිසේත් සහාය නොදක්වයි, නමුත් ඒවා සතුව -moz-inline-stack
ඇත්තේ එක හා සමානයි
inline-block
දර්ශන ගුණාංග වටා ඇති සමහර හරස් බ්රව්සර :
https://css-tricks.com/snippets/css/cross-browser-inline-block/
මෙම ගුණාංගය සමඟ ඔබට පරීක්ෂණ කිහිපයක් දැක ගත හැකිය: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
inline-block
3.0 (2008) සිට සහය දක්වයි . මූලාශ්රය: developer.mozilla.org/en-US/docs/Web/CSS/...
ඔබේ CSS ගොනුවට ශෛලියක් යොදන්න
div {
width: fit-content;
}
-moz-fit-content
එෆ්එෆ් සඳහා භාවිතා කළ හැකිය , අනුමාන වශයෙන් අනෙක් වෙළෙන්දන්ගේ උපසර්ගයන් ඒවාට ඉඩ දෙනු ඇත ...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
සමහර විට මිනිසුන් වගු වලට කැමති නැති බව මම දනිමි, නමුත් මම ඔබට පැවසිය යුතුය, මම සීඑස්එස් ඉන්ලයින් හැක්ස් අත්හදා බැලුවෙමි, ඔවුන් යම් යම් අංශවල වැඩ කළ නමුත් අනෙක් අය එසේ නොකළේය, එබැවින් පුළුල් වන ඩිවි එක ඇතුලත් කිරීම පහසුය වගුවක් ... සහ ... එයට පේළිගත දේපල තිබිය හැකි හෝ නොතිබිය හැකි අතර තවමත් වගුවේ අන්තර්ගතයේ මුළු පළල රඳවා තබා ගනී. =)
වැඩ කරන නිරූපණයක් මෙහි ඇත-
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>
මගේ CSS3 ෆ්ලෙක්ස් බොක්ස් විසඳුම රස දෙකකින් යුක්ත වේ: ඉහළින් ඇති තැනැත්තා පරතරයක් මෙන් හැසිරෙන අතර පතුලේ ඇති කොටස බෙදීමක් මෙන් හැසිරේ. ඔවුන්ගේ පන්ති පිළිවෙලින් "ඉහළ", "පහළ" සහ "පහළමාලය" වේ.
body {
font-family: sans-serif;
}
.top {
display: -webkit-inline-flex;
display: inline-flex;
}
.top, .bottom {
background-color: #3F3;
border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
display: -webkit-flex;
display: flex;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 280px;
border: 1px solid #666;
}
th {
background-color: #282;
color: #FFF;
}
td {
color: #444;
}
th, td {
padding: 0 4px 0 4px;
}
Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.
display: inline-flex;
. BTW මෙය ක්රෝම් 62, ෆයර්ෆොක්ස් 57 සහ සෆාරි 11 සඳහා උපසර්ගයක් නොමැතිව ක්රියා කරයි
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
මෙය මවුපියන්ගේ පළල විශාලතම මූලද්රව්ය පළලට සමාන කරයි.
උත්සාහ කරන්න display: inline-block;
. එය හරස් බ්රව්සරයට අනුකූල වීමට කරුණාකර පහත css කේතය භාවිතා කරන්න.
div {
display: inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;
border-style: solid;
border-color: #0000ff;
}
<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>
ෆයර්බග් සමඟ අවුල්සහගත ලෙස මම දේපල වටිනාකම සොයාගත්තා, -moz-fit-content
එය OP ට අවශ්ය දේ හරියටම කරන අතර එය පහත පරිදි භාවිතා කළ හැකිය:
width: -moz-fit-content;
එය ක්රියාත්මක වන්නේ ෆයර්ෆොක්ස් වල පමණක් වුවද, ක්රෝම් වැනි වෙනත් බ්රව්සර් සඳහා සමාන කිසිවක් මට සොයාගත නොහැකි විය.
fit-content
. ෆයර්ෆොක්ස් සහය දක්වන්නේ පළල සඳහා පමණි. වෙනත් බ්රව්සර් එයට හොඳින් සහාය දක්වයි.
ඔබට මෙම කේතය උත්සාහ කළ හැකිය. CSS කොටසේ කේතය අනුගමනය කරන්න.
div {
display: inline-block;
padding: 2vw;
background-color: green;
}
table {
width: 70vw;
background-color: white;
}
<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>
ටැගය තුළ ටැගයක් display: inline-block
එක් කිරීමෙන් සහ CSS හැඩතල ගැන්වීම පිටත ටැගයේ සිට නව අභ්යන්තර ටැගයට ගෙන යාමෙන් මම සමාන ගැටළුවක් ( අයිතමය කේන්ද්රගත වූ නිසා භාවිතා කිරීමට අවශ්ය නොවූ තැන) විසඳා ඇත . ඔබට සුදුසු පිළිතුරක් නොවේ නම් මෙය වෙනත් විකල්ප අදහසක් ලෙස එතැනට විසි කිරීම.span
div
div
span
display: inline block
ඔබ සතුව බහාලුම් කඩන රේඛා තිබේ නම්, පැය ගණනාවකට පසු හොඳ CSS විසඳුමක් සොයමින් කිසිවක් සොයාගත නොහැකි නම්, මම දැන් ඒ වෙනුවට jQuery භාවිතා කරමි:
$('button').click(function(){
$('nav ul').each(function(){
$parent = $(this).parent();
$parent.width( $(this).width() );
});
});
nav {
display: inline-block;
text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
display: inline;
}
/* needed style */
ul {
padding: 0;
}
body {
width: 420px;
}
/* just style */
body {
background: #ddd;
margin: 1em auto;
}
button {
display: block;
}
nav {
background: #bbb;
margin: 1rem auto;
padding: 0.5rem;
}
li {
display: inline-block;
width: 40px;
height: 20px;
border: solid thin #777;
margin: 4px;
background: #999;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>fix</button>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
</ul>
</nav>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
<li>1</li>
<li>5</li>
<li>9</li>
<li>2</li>
<li>6</li>
<li>5</li>
<li>3</li>
<li>5</li>
</ul>
</nav>
සංශෝධිත (ඔබට දරුවන් කිහිප දෙනෙකු සිටී නම් ක්රියා කරයි): ඔබට jQuery භාවිතා කළ හැකිය (JSFiddle සබැඳිය බලන්න)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
JQuery ඇතුළත් කිරීමට අමතක නොකරන්න ...