কোনও বিষয়বস্তু না রেখে একটি ডিভি কীভাবে তৈরি করা যায়?


110

আমি একটিতে প্রস্থ যুক্ত করার চেষ্টা করছি div, তবে মনে হচ্ছে কোনও সমস্যা হয়ে চলেছে কারণ এতে কোনও সামগ্রী নেই।

আমার এখন পর্যন্ত সিএসএস এবং এইচটিএমএল রয়েছে, তবে এটি কার্যকর হচ্ছে না:

সিএসএস

body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}

এইচটিএমএল

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

উত্তর:


158

একটি বিভাজনের জন্য সাধারণত একটি ডিভের কমপক্ষে একটি বিরতিহীন স্থান (& nbsp;) প্রয়োজন।


28
"প্রদর্শন: ইনলাইন-ব্লক" ব্যবহার করুন
লুস্কাস

ভাল সমাধান, যদি আমি & nbsp এর পরিবর্তে "" ব্যবহার করি; এটা কাজ করে না। তবে কেন?
অমিতাভ

1
'আরও & nbsp;' ন্যূনতম-উচ্চতার বিপরীতে একটি ভাল কৌশল কারণ এটি কোনও উচ্চতাকে বাধ্য করে না। বলুন আপনার ফন্টের আকার 16px এ সেট করা হয়েছে এবং আপনার প্যাডিং 15px হয়।
ডিভের সাথে

আমার কাছে, একটি স্থান স্থাপন কাজ করে না! প্রস্থ 100px এবং & nbsp এর মধ্যে ডিভ ফ্লেক্স ইনলাইন উপাদানগুলির সাথে একটি ডিভিতে 100 পিক্স বলে মনে হচ্ছে না
মিকি

89

উভয় ক্ষেত্রেই ব্যবহার padding, heightবা &nbsp প্রস্থের জন্য খালি সঙ্গে কার্যকর করারdiv

সম্পাদনা করুন:

নন শূন্যও min-heightদুর্দান্ত কাজ করে


5
আমি প্যাডিং সমাধানটি পছন্দ করি, 0 এর চেয়ে বেশি কোনও প্যাডিং কাজ করবে work এই ভাবে আপনি একটি অদ্ভুত, নির্বাচনযোগ্য হবে না &nbsp;div
ব্রায়ান ডানকান

1
দয়া করে নোট করুন: প্যাডিং সমাধানের জন্য এটি কাজ করার জন্য আপনাকে বাম / ডান এবং উপরের / নীচের প্যাডিং উভয় সরবরাহ করতে হবে।
গোবিন্দ রায়

62

ব্যবহার করুন min-height: 1px; সমস্ত কিছুর কমপক্ষে ন্যূনতম ন্যূনতম উচ্চতা 1px থাকে সুতরাং কোনও এনএসপি বা প্যাডিং সহ অতিরিক্ত স্থান নেওয়া হয় না বা উচ্চতাটি প্রথমে জানতে বাধ্য করা হয়।


2
আপনার সমাধানগুলি আমার কাছে সবচেয়ে পরিষ্কার বলে মনে হচ্ছে, তবে আমি সিএসএস স্পেসে এর কারণ অনুসন্ধান করার চেষ্টা করছি এবং আমি এটি কোথাও খুঁজে পাচ্ছি না, আমি খুঁজে পেয়েছি সবচেয়ে কাছাকাছি CSS 2.1, 9.5 Floatsযেখানে এটি বলেছে Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., তবে এটি লাইন বাক্সগুলি অর্থাৎ লাইনগুলি সম্পর্কে কথা বলে অনুচ্ছেদে, তবে সংলগ্ন বাক্সগুলির বিষয়ে নয়। সিএসএস অনুমানের সাথে আরও পরিচিত কেউ?
জাইমে হাবলুটজেল

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে। আমি এখানে & nbsp; বাদে অন্যান্য পরামর্শগুলির বেশিরভাগটিতে চেষ্টা করেছি।
আয়ুয়াসকা

28

আপনার ডিভিউতে শূন্য-প্রস্থের স্থান যুক্ত করতে সিএসএস ব্যবহার করুন। ডিভের সামগ্রীটি কোনও জায়গা নেবে না তবে ডিভটি প্রদর্শন করতে বাধ্য করবে

.test1::before{
   content: "\200B";
}

9

এটির প্রস্থ রয়েছে তবে সামগ্রী বা উচ্চতা নেই। ক্লাস টেস্ট 1 এ একটি উচ্চতার বৈশিষ্ট্য যুক্ত করুন।


7

খালি ডিআইভি দিয়ে float: leftবা float: rightদৃশ্যমান করার জন্য বিভিন্ন পদ্ধতি রয়েছে ।

আমি জানি তাদের এখানে উপস্থাপন করুন:

  • width(বা min-width) সাথে height(বা min-height) সেট করুন
  • বা সেট padding-top
  • বা সেট padding-bottom
  • বা সেট border-top
  • বা সেট border-bottom
  • বা ছদ্ম-উপাদান ব্যবহার করুন : ::beforeবা এর ::afterসাথে:
    • {content: "\200B";}
    • অথবা {content: "."; visibility: hidden;}
  • বা &nbsp;ডিআইভির ভিতরে রাখুন (এটি কখনও কখনও অপ্রত্যাশিত প্রভাবগুলি আনতে পারে উদাহরণস্বরূপ এর সংমিশ্রণে text-decoration: underline;)

1

display:block;আপনার পরীক্ষা 1 এ যুক্ত করার চেষ্টা করুন


1

উত্তর দিতে দেরি হলেও তবুও।

সিএসএস ব্যবহার করার সময়, ডিভ স্টাইল করতে (কন্টেন্ট-কম), ডিওটি দৃশ্যমান করার জন্য ন্যূন-উচ্চতার বৈশিষ্ট্যটি "এন" পিক্সে সেট করা আবশ্যক (ওয়েবকিট এবং ক্রোমের সাথে কাজ করে, যদিও এই কৌশলটি আই 6 এবং এ কাজ করবে কিনা তা নিশ্চিত নয়) নিম্ন)

কোড:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
<div class="shape-round"></div>



0

আমারো একই ইস্যু ছিল. আমি চেয়েছিলাম আইকনগুলি বোতামটি টিপে প্রদর্শিত হবে কিন্তু কোনও গতিবিধি ছাড়াই এবং পরিবেশটি স্লাইড না করে, যেমন বাল্বের মতো: চালু এবং বন্ধ, উপস্থিত এবং অদৃশ্য হয়ে যায়, তাই আমার স্থির আকারের সাথে একটি খালি ডিভি তৈরি করা দরকার।

width: 13px;
min-width: 13px;

আমার জন্য কৌশলটি


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.