"প্রস্থ: -মোজ-ফিট-কন্টেন্ট;" এর জন্য কি সিএসএস ক্রস ব্রাউজারের মান আছে?


86

আমার কেন্দ্রে অবস্থিত থাকতে এবং একই সাথে তাদের সামগ্রীর প্রস্থের ফিট করার জন্য কিছু ডিভ দরকার ।

আমি এখন এটি এইভাবে করছি:

.mydiv-centerer{

  text-align: center;

  .mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
  }
}

এখন, শেষ কমান্ড "প্রস্থ: -মোজ-ফিট-সামগ্রী;" হয় ঠিক কি আমি প্রয়োজন!

শুধুমাত্র সমস্যাটি .. এটি কেবল ফায়ারফক্সে কাজ করে।

আমি "প্রদর্শন: ইনলাইন-ব্লক" দিয়ে চেষ্টাও করেছি ; , তবে ডিভের মতো আচরণ করার জন্য আমার এই ডিভগুলি দরকার। যেমন, যে পরবর্তী DIV আছে হওয়া উচিত অধীনে না এবং ইনলাইন , আগের।

আপনি কি কোনও সম্ভাব্য ক্রস ব্রাউজার সমাধান জানেন?


4
: এই উত্তরের একটি ব্যবহার করে দেখুন stackoverflow.com/questions/5803030/...
ম্যাট এইচ

4
Chome fit-contentএখন সমর্থন করে ।
লিনাক্সডিসিপল

প্রতিটি ব্রাউজার (IE বাদে) এখন সমর্থন করে fit-content। ফায়ারফক্স ব্যতীত প্রতিটি ব্রাউজারে এটি উপসর্গ ছাড়াই কাজ করে, ফায়ারফক্সের এখনও প্রয়োজন -moz-fit-content। দেখুন developer.mozilla.org/en-US/docs/Web/CSS/...
biolauri

উত্তর:


168

শেষ পর্যন্ত আমি এটি সহজভাবে ব্যবহার করে ঠিক করেছি:

display: table;

4
আমি এখানে আপনার প্রশ্নের একই শর্তাবলী খুঁজছেন। আমি display: tableএবং margin: autoকেন্দ্র একটি form। দুর্দান্ত! : ডি
লেনিয়েল ম্যাককাফেরি

পাশাপাশি, আমাকে সাদা স্থান ব্যবহার করতে হয়েছিল: প্রাক! গুরুত্বপূর্ণ;
বিমল দাশ

4
কিছু বৈশিষ্ট্য সম্মান করে না, যেমন max-width: 100%
ড্যানিয়েল

প্রতিটি ব্রাউজার (IE বাদে) এখন সমর্থন করে fit-content। ফায়ারফক্স ব্যতীত প্রতিটি ব্রাউজারে এটি উপসর্গ ছাড়াই কাজ করে, ফায়ারফক্সের এখনও প্রয়োজন -moz-fit-content। দেখুন developer.mozilla.org/en-US/docs/Web/CSS/...
biolauri

72

মজিলার এমডিএন নিম্নলিখিত [ উত্স ] এর মতো কিছু প্রস্তাব দেয় :

 p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

আপনি স্টাইলিং পি এর জন্য কি আমরা দ্বিগুণ প্রস্থ নির্দিষ্ট করতে পারি? প্রস্থ মত: অন্তর্নিহিত; / * সাফারি / ওয়েবকিট একটি মানহীন নাম / প্রস্থ ব্যবহার করে: -মোজ-সর্বোচ্চ-সামগ্রী; / ফায়ারফক্স / গেকো * /
সাগর ভোসলে

4
-moz-max-content-moz-fit-contentমূল উপাদানটি আরও বিস্তৃত হওয়ার সাথে সমান । -moz-fit-contentবিষয়বস্তু ফিট করে এবং পাঠ্য মোড়ানো -moz-max-contentহবে , কিন্তু পিতামণ্ডল উপাদান বাইরে প্রসারিত হবে। একই ক্রোমের -webkit-max-contentএবং এর জন্য প্রযোজ্য fit-content
লিনাক্সডিসিপল

যোগ করতে ভুলবেন না width: max-content;
টোবিয়াস টাঙ্গলার

14

অনুরূপ ক্ষেত্রে আমি ব্যবহার: white-space: nowrap;


4
এটি আমার সমস্যাটিকে একটি ড্রপ-ডাউন সামগ্রীর ওভারফ্লো দিয়ে স্থির করেছে। ধন্যবাদ!
জাচ লেইটন

8

ওয়েবকিট, গেকো এবং ব্লিঙ্কের জন্য এটি কি একক ঘোষণার সমাধান করে? না। তবে, একাধিক প্রস্থের সম্পত্তি মান নির্দিষ্ট করে একটি ক্রস ব্রাউজার সমাধান রয়েছে যা প্রতিটি লেআউট ইঞ্জিনের কনভেনশনের সাথে মিল রাখে।

.mydiv {  
  ...
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

অভিযোজিত থেকে: এমডিএন


2

আমি এগুলি ব্যবহার করি:

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}


-1

কিছু brএস ব্যবহার করবেন না কেন ?

<div class="mydiv-centerer">
    <div class="mydiv">Some content</div><br />
    <div class="mydiv">More content than before</div><br />
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

সিএসএস

.mydiv-centerer{
    text-align: center;
}

.mydiv{
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    display:inline-block;
}

উদাহরণ: http://jsfiddle.net/YZV25/


4
আপনাকে অনেক ধন্যবাদ, এটি কাজ করে, তবে ডিভের মধ্যে শীর্ষ এবং নীচের মার্জিনটি পরিচালনা করা খুব কঠিন করে তোলে। আমি কেবল এর display: table;পরিবর্তে আরও ভাল সমাধান পেয়েছি display: inline-block;
ডারমে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.