কিভাবে ফাঁকা ডিভ তৈরি করবেন স্থান নিন

104

এটি আমার 960 গ্রিড সিস্টেমের কেস:

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

এটি আমার ডিভসের সেট, একটি টেবিল কাঠামো হিসাবে ব্যবহৃত।

সিএসএস নিম্নলিখিত বলে:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

সুইডিশ নামকরণে কিছু মনে করবেন না। আমি ডিভগুলি দেখতে চাই যদিও তাদের কোনও মান নেই।

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

এর মতো, এই ক্ষেত্রে দুটি কলামে 'নমন' এবং 'অ্যাভন.নমন' নেই। তবে ক্রোমে এটি চালানোর সময় এগুলি সরিয়ে ফেলা হয় এবং ক্রমে অন্য ডিভগুলি আর চাপায় না float:left। সুতরাং যদি আমার উপরে একই ডিভগুলিতে বিভাগ থাকে, তবে মানগুলি ভুল বিভাগের অধীনে স্থাপন করা হবে।

css html

— Oldek
সূত্র

64

আপনি ভাসমান সরিয়ে ফেললে এটি কাজ করে। http://jsbin.com/izoca/2/edit

উদাহরণস্বরূপ, যদি কিছু সামগ্রী থাকে তবে এটি কেবলমাত্র কাজ করে works  

— Rito
সূত্র

5

আর একটি উত্তর বলছে যে মিনিট উচ্চতায় স্থাপন করা এটি ভাসমান অবস্থায় কাজ করবে এবং অবশ্যই আমার নিজের ক্ষেত্রে এটি কাজ করেছে। যদি এটি সর্বদা সত্য হয় (এখন, ২০১ in সালে) তবে এই উত্তরটি ভুল। আপনি কেবল ন্যূনতম উচ্চতা যুক্ত করতে পারেন: 1 পিএক্স; প্রস্থে: 140px; ফ্লোট অপসারণ বা সামগ্রী যুক্ত করার প্রয়োজন ছাড়াই।

— নিক রাইস

element.text(" ");JQuery চেষ্টা  করেছেন এবং পৃষ্ঠায় প্রদর্শিত হবে।

— লোরি

54

 খালি আইটেম যুক্ত করার চেষ্টা করুন ।

আমি বুঝতে পারি না আপনি কেন <table>এখানে ব্যবহার করছেন না ? তারা স্বয়ংক্রিয়ভাবে এই ধরণের জিনিসগুলি করবে।

— Pekka
সূত্র

9

একমত। যদি এটি টেবুলার ডেটা হয় তবে একটি টেবিল ব্যবহার করুন - এটি তাদের জন্য।

— ড্যান ডিপ্লো

5

<table>এতক্ষণ পরেও লোকেরা এখনও == খারাপ অনুমান করে ।

— 18:01

4

 এটি যতটা জনপ্রিয় সমাধান হিসাবে ব্যবহার করা হয়েছে , কিছু পরিস্থিতিতে এটির কারণ হতে পারে। আপনি যখন পাঠাবেন ( text-decoration: line-through;) পাঠ্যক্রমের সময় স্ট্রোকটি প্রদর্শিত হবে  , আপনি যা চান তা কেবল একটি ফাঁকা ডিভ।

— ইজাকি

1

@ পেপকা 웃, "সারণী ব্যবহার করা" সর্বদা সম্ভব নয়। প্রতিক্রিয়াশীল ডিজাইনের জন্য আমার একই সমস্যা ("কীভাবে খালি ডিভি নেবে স্থান"), যেখানে আমি যখন প্রস্থটি সংক্ষিপ্ত হবে তখন একটি উল্লম্ব টেবিল তৈরি করব। আমি ইতিমধ্যে টেবিলগুলি ব্যবহার করছি ...

— আনভিস

@ আগে কখনও কোনও টেবিল এই ক্ষেত্রে প্রস্থটি সর্বদা সঠিকভাবে স্থান করে দেবে, যদিও, না? নিশ্চিত না যে আমি অনুসরণ করি ....

— পেক্কা

25

@ No1cobla উত্তরে সামান্য আপডেট। এটি পিরিয়ড লুকায়। এই সমাধানটি আই 8 + এ কাজ করে।

.class:after
{
    content: '.';
    visibility: hidden;
}

— জনাথন
সূত্র

5

আপনি যখন খালি খালি খালি কাজ করছেন আপনি যদি ফ্যালব্যাক হিসাবে এটি ব্যবহার করতে চান তবে এমন কিছু যুক্ত করুন:.class:after:empty

— মিগুয়েল গ্যারিডো

1

@ মিগুয়েল গ্যারিডো - আমাকে .class ব্যবহার করতে হয়েছিল: খালি: তার পরে কাজ করার জন্য।

— সেকেন্ডারপসন

24

খালি ভাসমান ডিভের জন্য একটি সহজ সমাধান হ'ল:

প্রস্থ (বা ন্যূনতম প্রস্থ)
মিনিট-উচ্চতা

এইভাবে আপনি ভাসা কার্যকারিতা রাখতে এবং ফাঁকা স্থান পূরণ করতে বাধ্য করতে পারেন।

অন্যান্য কলাম খালি থাকলেও প্রতিটি কলামকে তার অবস্থানে রাখতে আমি পৃষ্ঠার বিন্যাস কলামগুলিতে এই কৌশলটি ব্যবহার করি।

উদাহরণ:

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

— Engineeroholic
সূত্র

4

min-heightসবচেয়ে ভাল সমাধান

— ভ্যাল 3 ই

ন্যূনতম উচ্চতা কেবলমাত্র সমস্যাটি সমাধান করে width। যাইহোক, এটি ডিওটি শূন্য উচ্চতা হতে বাধা দেয় না। (সমস্যাটি দেখতে ডিভ ব্যাকগ্রাউন্ড সেট করার চেষ্টা করুন)। অতএব & nbsp; এটি আরও সাধারণ সমাধান। এছাড়াও বিষয়বস্তু: "।" শূন্য উচ্চতার সমস্যা সমাধান করে।

— জন হেন্কেল

1

একটি মিনিট উচ্চতা = 1px 0 সমান হয় না! এটি 1 px আকারে হতে হবে, যদি আপনি ডিফল্ট উচ্চতা আপনি কেবল বলতে পারেন সর্বনিম্ন-উচ্চতা = 100px এবং কমপক্ষে প্রস্থ = 100px, DIV আছে সবসময় 100x100 হতে হবে কোন উপায় 0 হতে হবে চান

— Engineeroholic

এবং "& nbsp" ব্যবহার করা খুব খারাপ অভ্যাস, আপনার যদি অনেক ফাইল সহ একটি বড় ওয়েবসাইট থাকে এবং প্রতিটি ফাইলের 10 কে এইচটিএমএল লাইন থাকে? আমি যদি আপনার পদ্ধতির অনুসরণ করি তবে প্রতিটি ফাইলের ভিতরে "& nbsp" লাগিয়ে দেব! সময় কি একটি বর্জ্য!? আপনার যদি কোনও ব্যবহারকারী-উত্পাদিত সামগ্রী ওয়েবসাইট থাকে? উদাহরণস্বরূপ কোনও ব্যবহারকারী খালি মন্তব্য জমা দিন .. আপনার সমাধানের ভিত্তিতে মন্তব্যটি খালি কিনা তা পরীক্ষা করার জন্য আমাকে একটি কোড তৈরি করতে হবে, তারপরে "& nbsp" যুক্ত করুন (কোনও কারণ ছাড়াই জটিলতার জন্য) ন্যূনতম উচ্চতা এবং ন্যূনতম প্রস্থই সেরা সমাধান কারণ আমি এটি একবার লিখব এবং ভবিষ্যতে আরও কন্টেন্ট যুক্ত করলেও এটি নিয়ে আবার চিন্তা করব না

— ইঞ্জিনিয়ারহোলিক

22

একটি সিউডো উপাদানটির ভিতরে কেবল শূন্য প্রস্থের অক্ষর যুক্ত করুন

.class:after {
    content: '\200b';
}

— Blowsie
সূত্র

ওহ, আমি এই ধারণাটি পছন্দ করি কারণ এর অর্থ ব্যবহারকারী ভুলবশত এটিকে অনুলিপি করে অনুলিপি-পেস্ট করবেন না, সিউডো-উপাদানগুলি ডিফল্টরূপে অনির্বাচনযোগ্য।

— ডোমিনো

3

এটি একটি উপায়:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

— vothaison
সূত্র

1

আমি content: "\200b";একটি শূন্য প্রস্থ স্থান জন্য প্রস্তাব । অতিরিক্ত সুবিধা হ'ল ব্রাউজারটি এই অক্ষরটি নির্বাচন করবে না (উদাহরণস্বরূপ CTRL+A CTRL+Cএখনও একই আচরণ করবে)।

— yyny

3

আপনি পারেন:

o সেট .kundregister_grid_1করুন:

width(বা width-min) সাথে height(বা min-height)
অথবা padding-top
অথবা padding-bottom
অথবা border-top
অথবা border-bottom

o বা ছদ্ম-উপাদানগুলি ব্যবহার করুন : ::beforeবা এর ::afterসাথে:

{content: "\200B";}
বা {content: "."; visibility: hidden;}।

o বা  খালি উপাদানটির ভিতরে রাখুন তবে এটি কখনও কখনও অপ্রত্যাশিত প্রভাবগুলি আনতে পারে যেমন। আমি তাল মিলাতে চেষ্টা করছিtext-decoration: underline;

— simhumileco
সূত্র

2

কেন আপনার সিএসএস-ক্লাসে কেবল "মিনিট প্রস্থ" যুক্ত করবেন না?

— MrTombola
সূত্র

2

কাজ করে তবে এটি সঠিকভাবে নয় বলে আমি মনে করি ডাব্লু ন্যূনতম-উচ্চতা: 1 পিএক্স;

— এস এম মাহমুদুল হাসান
সূত্র

1

ইনলাইন-ব্লক ব্যবহার করে এটি একটি ইনলাইন অবজেক্ট হিসাবে আচরণ করবে। সুতরাং এক লাইনে প্রতিটিের পাশে এগুলি পেতে কোনও ফ্লোটের প্রয়োজন নেই। এবং প্রকৃতপক্ষে রিতো যেমন বলেছিলেন, ভাসমানগুলির একটি "দেহ" প্রয়োজন, যেমন তাদের মাত্রা প্রয়োজন।

আমি টেবিল ব্যবহার সম্পর্কে পেককার সাথে পুরোপুরি একমত। ডিভ এর এড়াতে সারণী ব্যবহার করে লেআউট তৈরি করা প্রত্যেকে যেমন এটি হ'ল তবে এগুলি ট্যাবুলার ডেটার জন্য ব্যবহার করুন! এটাই তারা মেন্টস। এবং আপনার ক্ষেত্রে আমি মনে করি আপনার এগুলি প্রয়োজন :)

তবে আপনি যদি সত্যিই যা চান তবে তা চান। একটি সিএসএস হ্যাক উপায় আছে। ফ্লোট হ্যাক হিসাবে একই।

.kundregister_grid_1:after {  content: ".";  }

এটি যোগ করুন এবং আপনি সেটও করেছেন: ডি (দ্রষ্টব্য: আইই তে কাজ করে না তবে এটি স্থিরযোগ্য)

— no1cobla
সূত্র

1

যদি তাদের ভাসমান হওয়া প্রয়োজন, আপনি সর্বদা ন্যূনতম-উচ্চতা 1px এ সেট করতে পারেন যাতে তারা ভেঙে না যায়।

— mmmeff
সূত্র

0

বিন্যাস ট্যাগগুলির একটি কাস্টম সেট তৈরি করতে গিয়ে আমি এই সমস্যার আর একটি উত্তর পেয়েছি। এখানে প্রদত্ত হ'ল ট্যাগগুলির কাস্টম সেট এবং তাদের সিএসএস ক্লাস।

এইচটিএমএল

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

সিএসএস

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

এখানে কীটি বক্স-সাইজিং এবং প্যাডিং।

— ই নেট আর্ক
সূত্র