কীভাবে একটি ডিভকে তার পিতামাতার শীর্ষে সারিবদ্ধ করবেন তবে এর ইনলাইন-ব্লক আচরণ রাখবেন?


171

দেখুন: http://jsfiddle.net/b2BpB/1/

প্রশ্ন: আপনি বাক্স 1 এবং বক্স 3 কীভাবে পিতামাতার ডিভের শীর্ষে সারিবদ্ধ করতে পারেন boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

অনেক প্রশংসা সাহায্য ...

স্বীকৃতি: এই প্রশ্নের একটি উত্তর পূর্বে কর্তৃক প্রদত্ত থেকে forked হয় https://stackoverflow.com/users/20578/paul-d-waite : একটি CSS উপাদান পথ স্বয়ংক্রিয়ভাবে সামগ্রীর প্রস্থ থেকে আকার পরিবর্তন করতে, এবং একই সময়ে কেন্দ্রীভূত করা

উত্তর:


378

vertical-alignসিএসএস সম্পত্তি চেষ্টা করুন ।

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

#box3এটিও প্রয়োগ করুন ।


3
আপনি যদি সর্বজনীন সমাধান চান তবে vertical-align: top;আপনার #boxContainer divনির্বাচককে প্রয়োগ করতে হবে । এটি স্টাইলটি divঅভ্যন্তরের সমস্ত উপাদানগুলিতে প্রয়োগ করে boxContainer
মার্থিমেম

30

যেমনটি অন্যরা বলেছেন, vertical-align: topআপনার বন্ধু।

বোনাস হিসাবে এখানে অতিরিক্ত সংযোজনযুক্ত একটি কাঁটাযুক্ত ফিডাল যা এটি ইন্টারনেট এক্সপ্লোরার 6 এবং ইন্টারনেট এক্সপ্লোরার 7 এও কার্যকর করে তোলে;)

উদাহরণ: এখানে


7

উল্লম্ব-প্রান্তিককরণ ব্যবহার করুন: শীর্ষ; যে উপাদানটি আপনি শীর্ষে চান তার জন্য, যেমন আমি আপনার জেসফিডেলে প্রদর্শন করেছি।

http://www.brunildo.org/test/inline-block.html


6

আপনি ভাসা যোগ করতে পারেন: বাম; প্রতিটি বাক্সের জন্য (box1, box2, box3)।

http://jsfiddle.net/Wa4ma/


উল্লম্ব-সারিবদ্ধ +1
জুর্গেন

পৃথিবীতে কেন এই কাজ হয়? আমি এটি পছন্দ করি তবে আমি এটি বুঝতেও চাই।
কেভিন বুলাউঘে

-1

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


আপনি উল্লম্ব-সারিবদ্ধ ব্যবহার করতে পারেন কেন একটি টেবিল যুক্ত করবেন?
tcoulson

1
@ টকলসন আমি কোনও টেবিল ব্যবহার করার কথা বলিনি, আমি বলেছিলাম আপনি প্রদর্শনটি ব্যবহার করতে পারেন: ইনলাইন-টেবিল, যা 3 বছর আগে ব্রাউজারের আরও ভাল সমর্থন ছিল এবং এটি উল্লম্ব-সারিবদ্ধকরণকে সহজ করে তুলেছিল।
রবার্ট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.