আমার মতো লেআউট রয়েছে:
<div>
<table>
</table>
</div>আমি চাই divযে কেবল আমার tableআকারের আকারে প্রসারিত হবে।
উত্তর:
সমাধান আপনার সেট করা divহয় display: inline-block।
spanবা একটি divবা ulঅন্য যে কোনও কিছু ব্যবহার করতে পারেন , গুরুত্বপূর্ণ অংশটি আপনি যে নূন্যতম প্রস্থের হতে চান তার জন্য সিএসএস সম্পত্তি থাকতে হবেdisplay: inline-block
display: inline-blockসম্পত্তি সেট হয়ে গেলে margin: 0 auto;প্রত্যাশার মতো কাজ করবে না। সেক্ষেত্রে যদি পিতামাতার ধারক থাকে text-align: center;তবে inline-blockউপাদানটি অনুভূমিকভাবে কেন্দ্রিক হবে।
inline-blockআমার জন্য কাজ করেনি, কিন্তু ছিল inline-flex।
আপনি এমন একটি ব্লক উপাদান চান যা সিএসএসকে সংকুচিত-থেকে-ফিট প্রস্থ বলে এবং সেই বৈশিষ্টটি এ জাতীয় জিনিস পাওয়ার জন্য কোনও আশীর্বাদযুক্ত উপায় সরবরাহ করে না। সিএসএস 2-তে, সঙ্কুচিত-থেকে-ফিট কোনও লক্ষ্য নয়, তবে ব্রাউজারকে "পাতলা" বাতাসের প্রশস্ততা অর্জন করতে হবে "এমন পরিস্থিতির সাথে মোকাবিলা করা। সেই পরিস্থিতিগুলি হ'ল:
যখন প্রস্থ নির্দিষ্ট নেই। আমি শুনেছি তারা CSS3 এ আপনি যা চান তা যুক্ত করার কথা ভাবছেন। আপাতত উপরের যেকোন একটি দিয়ে করুন।
বৈশিষ্ট্যটি সরাসরি প্রকাশ না করার সিদ্ধান্তটি অদ্ভুত বলে মনে হতে পারে, তবে এর পিছনে একটি ভাল কারণ রয়েছে। এটা দামী. সঙ্কুচিত থেকে ফিট মানে কমপক্ষে দু'বার বিন্যাস করা: আপনি কোনও উপাদান এর প্রস্থ না জানা অবধি ফর্ম্যাট করা শুরু করতে পারবেন না এবং আপনি পুরো সামগ্রীর মধ্য দিয়ে প্রস্থের ডাব্লু / ওও গণনা করতে পারবেন না। অধিকন্তু, কারও কাছে যতক্ষণ মনে করা যায় সঙ্কুচিত থেকে ফিট করে এমন উপাদানগুলির প্রয়োজন হয় না। আপনার টেবিলের চারপাশে আপনার অতিরিক্ত ডিভি দরকার কেন? আপনার কেবল টেবিল শিরোনামই প্রয়োজন।
inline-blockএটি ঠিক এটির জন্যই এবং সমস্যাটি নিখুঁতভাবে সমাধান করে।
content-box, max-content, min-content, available, fit-content, auto
fit-contentকীওয়ার্ড (যখন এই উত্তরটি প্রথম লেখা হয়েছিল তখন অস্তিত্ব নেই এবং এখনও পুরোপুরি সমর্থিত নয় ) আপনাকে কোনও উপাদানকে স্পষ্টভাবে "সঙ্কুচিত-থেকে-ফিট" সাইজিং প্রয়োগ করতে দেয়, আপনি এখানে থাকলে প্রস্তাবিত যে কোনও হ্যাকের প্রয়োজনীয়তা সরিয়ে দেয় ভাগ্যবান কেবলমাত্র সমর্থন সহ ব্রাউজারগুলিকে লক্ষ্য করা যায়। তবুও +1; এগুলি আপাতত দরকারী!
floatআমার যা করা দরকার তা করলাম!
আমি ব্যবহার করে মনে করি
display: inline-block;কাজ করবে, তবে আমি ব্রাউজারের সামঞ্জস্যতা সম্পর্কে নিশ্চিত নই।
আরেকটি সমাধান হ'ল আপনার divঅন্যটিতে মোড়ানো div(আপনি যদি ব্লক আচরণটি বজায় রাখতে চান):
এইচটিএমএল:
<div>
<div class="yourdiv">
content
</div>
</div>সিএসএস:
.yourdiv
{
display: inline;
}*display: inline; *zoom: 1;। আমি এই নির্দিষ্ট পরিস্থিতির জন্য পরীক্ষা করিনি, তবে আমি সর্বদা খুঁজে পেয়েছি যে হ্যাসলয়েট হ্যাক কেবল আই 7, বা আইই 7-মোডে আইই 8 (বা আইই 8 কুইর্কস!) এর জন্য প্রয়োজন।
inline-block, আইই 7.. এ সক্ষম হওয়া সত্যিই একটি কাজ
display: inline-block আপনার উপাদানটিতে একটি অতিরিক্ত মার্জিন যুক্ত করে।
আমি এটি সুপারিশ করব:
#element {
display: table; /* IE8+ and all other modern browsers */
}বোনাস: আপনি এখন #elementকেবল যুক্ত করে সহজেই সেই অভিনবকে কেন্দ্র করতে পারবেন margin: 0 auto।
position: absolute< আই 8 এর জন্য একটি শর্তাধীন মন্তব্য প্রয়োজনীয় comment
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;স্টাইল সেট করা উচিত । এটি অনেকগুলি ব্রাউজারে ডিফল্ট তবে প্রায়শই সিএসএস ফ্রেমওয়ার্ক যেমন বুটস্ট্র্যাপের মানটিকে পুনরায় সেট করে collapse।
আরও দুটি ভাল সমাধান আছে
display: inline-block;
অথবা
display: table;
এই দুটির display:table;মধ্যে ভাল, কারণ display: inline-block;একটি অতিরিক্ত মার্জিন যুক্ত করে।
জন্য display:inline-block;আপনাকে নেতিবাচক মার্জিন পদ্ধতি ব্যবহার করতে পারেন অতিরিক্ত স্থান ঠিক করতে
display:tableভাল তা বোঝাতে আপনার আপত্তি আছে ?
display:tableব্লক ফর্ম্যাটিং প্রসঙ্গে উপাদানটিকে ছেড়ে দেয়, তাই আপনি যথারীতি মার্জিন ইত্যাদির সাহায্যে এর অবস্থানটি নিয়ন্ত্রণ করতে পারেন। display:-inline-*অন্যদিকে, উপাদানটি ইনলাইন ফর্ম্যাটিং প্রসঙ্গে রাখে, ব্রাউজারটি উত্তরাধিকারসূত্রে প্রাপ্ত ফন্ট / লাইন-উচ্চতা সেটিংস সহ লাইন বাক্সটি চারপাশে বেনামে ব্লক মোড়ক তৈরি করে এবং সেই লাইন বাক্সে ব্লকটি সন্নিবেশ করে (সারিবদ্ধ করে তোলে) এটি ডিফল্টরূপে বেসলাইন দ্বারা উল্লম্বভাবে)। এটিতে আরও "জাদু" জড়িত এবং তাই সম্ভাব্য বিস্ময় প্রকাশ করে।
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;ফু হ্যাক - ইনলাইন-ব্লক স্টাইলিংয়ের জন্য ক্রস ব্রাউজার সহায়তা (2007-11-19) ।
-moz-inline-stack
এটি কোন প্রসঙ্গে প্রদর্শিত হবে তা অবগত না করে তবে আমি বিশ্বাস করি যে সিএসএস-স্টাইলের সম্পত্তিটি floatহয় leftবা এর rightপ্রভাব ফেলবে। অন্যদিকে, এর অন্যান্য পার্শ্ব প্রতিক্রিয়াও রয়েছে, যেমন পাঠ্যটিকে চারপাশে ভাসতে দেয়।
আমি ভুল থাকলেও আমাকে সংশোধন করুন, আমি 100% নিশ্চিত নই এবং বর্তমানে এটি নিজেই পরীক্ষা করতে পারছি না।
আপনার প্রশ্নের উত্তর ভবিষ্যতে দেয় আমার বন্ধু ...
সর্বশেষতম CSS3 আপডেটের সাথে "আন্তঃদেশীয়" আসছে
width: intrinsic;দুর্ভাগ্যক্রমে আইই পিছনে রয়েছে তাই এটি এখনও সমর্থন করে না
এটি সম্পর্কে আরও: সিএসএস ইন্টার্নসিক এবং এক্সট্রিনসিক সাইজিং মডিউল স্তর 3 এবং আমি কী ব্যবহার করতে পারি? : অন্তর্নিহিত এবং এক্সট্রিনসিক সাইজিং ।
আপাতত আপনাকে সন্তুষ্ট থাকতে হবে <span>বা <div>সেট করতে হবে
display: inline-block;intrinsicমান হিসাবে মানহীন। এটা আসলে width: max-content। এতে এমডিএন পৃষ্ঠা বা ইতিমধ্যে সংযুক্ত খসড়াটি দেখুন।
একটি CSS2 সামঞ্জস্যপূর্ণ সমাধান ব্যবহার করা হয়:
.my-div
{
min-width: 100px;
}আপনি আপনার ডিভিটিও ভাসিয়ে রাখতে পারেন যা এটি যতটা সম্ভব ছোট হিসাবে জোর করবে, তবে আপনার ডিভের অভ্যন্তরে যদি কিছু ভাসছে তবে আপনাকে একটি ক্লিয়ারফিক্স ব্যবহার করতে হবে :
.my-div
{
float: left;
}width:1px;
white-space: nowrap;আমার জন্য কাজ করে :)
ঠিক আছে, অনেক ক্ষেত্রে আপনাকে ডিফল্ট ডিভ হিসাবে 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;
}display: flex;
আপনি inline-block@ ব্যবহারকারী 4735358 হিসাবে ব্যবহার করতে পারেন তবে পুরানো ব্রাউজারগুলি থেকে সাবধান থাকুন ..
/* 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- sks/
inline-block3.0 (2008) থেকে সমর্থন করে । সূত্র: ডেভেলপার.মোজিলা.আর.ইন-
আপনার সিএসএস ফাইলে কেবল একটি শৈলী রাখুন
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>আমার সিএসএস 3 ফ্লেক্সবক্স সমাধান দুটি স্বাদে: শীর্ষে থাকা একটিটি স্প্যানের মতো আচরণ করে এবং নীচের অংশে একটি ডিভের মতো আচরণ করে, একটি র্যাপারের সাহায্যে সমস্ত প্রস্থ গ্রহণ করে। তাদের ক্লাসগুলি যথাক্রমে "শীর্ষ", "নীচে" এবং "তলদেশের রচনা"।
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;। বিটিডাব্লু এটি ক্রোম 62, ফায়ারফক্স 57 এবং সাফারি 11 এর উপসর্গ ছাড়াই কাজ করে
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>এটি প্যারেন্ট ডিভ প্রস্থকে বৃহত্তম উপাদানের প্রস্থের মতো করে তুলবে।
ব্যবহার করে দেখুন display: inline-block;। এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হওয়ার জন্য দয়া করে নীচের সিএসএস কোডটি ব্যবহার করুন।
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যা ঠিক ওপি যা চেয়েছিল তা করে এবং অনুসরণ হিসাবে ব্যবহার করা যেতে পারে:
width: -moz-fit-content;যদিও এটি কেবল ফায়ারফক্সে কাজ করে, আমি ক্রোমের মতো অন্যান্য ব্রাউজারগুলির জন্য কোনও সমতুল্য খুঁজে পাইনি।
fit-content। ফায়ারফক্স কেবল প্রস্থ সমর্থন করে। অন্যান্য ব্রাউজারগুলি এটির পক্ষে ভাল সমর্থন করে।
আপনি এই কোড চেষ্টা করতে পারেন। সিএসএস বিভাগে কোডটি অনুসরণ করুন।
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একটি spanট্যাগ যুক্ত করে divএবং সিএসএস বিন্যাসটিকে বাইরের divট্যাগ থেকে নতুন অভ্যন্তরীণ spanট্যাগে সরিয়ে নিয়ে একই ধরণের সমস্যার সমাধান করেছি (যেখানে আমি আইটেমটি কেন্দ্রিক ছিল বলেই ব্যবহার করতে চাইনি ) । display: inline blockআপনার জন্য উপযুক্ত উত্তর না হলে কেবল এটি অন্য বিকল্প ধারণা হিসাবে ফেলে দিন ।
div{
width:auto;
height:auto;
}আপনার যদি ধারক ভাঙার লাইন থাকে, কয়েক ঘন্টা পরে ভাল সিএসএস সমাধান খুঁজছেন এবং কোনও খুঁজে না পেয়ে, আমি এখন পরিবর্তে 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 ব্যবহার করতে পারেন (জেএসফিডাল লিঙ্কটি দেখুন)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});JQuery অন্তর্ভুক্ত করতে ভুলবেন না ...