সিএসএস উল্লম্বভাবে ভাসমান ডিভগুলি সারিবদ্ধ করুন

Question 1

আমার কাছে একটি ডিভ (# র্যাপার) রয়েছে পাশাপাশি দুটি ডিভ পাশাপাশি দাঁড়িয়ে আছে।

আমি ডান-ডিভটি উল্লম্বভাবে সারিবদ্ধ হতে চাই। আমি উল্লম্ব-প্রান্তিককরণের চেষ্টা করেছি: আমার প্রধান মোড়কের মাঝখানে কিন্তু এটি কাজ করছে না। এটা আমাকে পাগল করে তুলেছে!

আশা করি কেউ সাহায্য করতে পারেন।

http://cssdesk.com/LWFhW

এইচটিএমএল:

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>  
  <div id="right-div">
    Here some text...
  </div>
</div>

সিএসএস:

#wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

Question 2

ভাসমান উপাদানগুলির সাথে আপনার ভাগ্য নেই। তারা উল্লম্ব-সারিবদ্ধতা মানেন না,

display:inline-blockপরিবর্তে আপনার প্রয়োজন :

http://cssdesk.com/2VMg8

সাবধান

display: inline-block;এটি উপাদানগুলির মধ্যে সাদা স্থানকে আসল সাদা-স্থান হিসাবে ব্যাখ্যা করার সাথে সাবধান হন। এটি এর মতো করে তা উপেক্ষা করে না display: block।

আমি এটি সুপারিশ:

সেট font-sizeথেকে ধারণকারী উপাদান 0(শূন্য) এবং রিসেট font-sizeআপনার প্রয়োজনীয় মান উপাদানের মধ্যে এত পছন্দ

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

এখানে একটি বিক্ষোভ দেখুন: http://codepen.io/HerrSerker/pen/mslay

সিএসএস

#wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;  
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

Question 3

আপনি প্রদর্শন টেবিল এবং প্রদর্শন টেবিল-সেল দিয়ে এটি বেশ সহজেই করতে পারেন।

#wrapper {
    width: 400px;
    float: left;
    height: auto;
    display: table;
    border: 1px solid green;
}

#right-div {
    width: 356px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

সম্পাদনা: আসলে আপনার জন্য সিএসএস ডেস্কে দ্রুত গণ্ডগোল হয়েছে - http://cssdesk.com/RXghg

অন্য সম্পাদনা: ফ্লেক্সবক্স ব্যবহার করুন। এটি কাজ করবে তবে এটি বেশ পুরানো - http://www.cssdesk.com/davf5

#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

#left-div {
    border:1px solid blue;
}

#right-div {
    border:1px solid red;
}

Question 4

আমি বুঝতে পারি এটি একটি প্রাচীন প্রশ্ন তবে আমি ভেবেছিলাম যে ভাসমান উলম্ব সারিবদ্ধ ইস্যুটির সমাধান পোস্ট করা কার্যকর হবে।

আপনি যে সামগ্রীটি ভাসতে চান তার চারপাশে একটি মোড়ক তৈরি করে, আপনি সিডো নির্বাচনকারীদের আগে মোড়কের অভ্যন্তরে উল্লম্বভাবে সারিবদ্ধ করার জন্য :: পরে বা :: ব্যবহার করতে পারেন। প্রান্তিককরণকে প্রভাবিত না করে আপনি যা চান তা সামগ্রীর আকার সামঞ্জস্য করতে পারেন। শুধুমাত্র ধরা যে মোড়কের 100% উচ্চতা পূরণ করতে হবে হয় তার ধারক।

http://jsfiddle.net/jmdrury/J53SJ/

এইচটিএমএল

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

সিএসএস

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

Question 5

Https://spin.atomicobject.com/2016/06/18/vertically-center-floated-eferences-flexbox/ দ্বারা নির্দিষ্ট করা div flexআইটেমগুলির সাথে প্রান্তিককরণের সাথে মোড়ক তৈরি করা একটি সম্ভাব্য সমাধান ।center

Question 6

আমি ভাসা ব্যবহার এড়ানোর জন্য যথাসাধ্য চেষ্টা করি ... তবে - যখন প্রয়োজন হয় আমি নীচের লাইনগুলি ব্যবহার করে মাঝখানে উল্লম্বভাবে সারিবদ্ধ:

position: relative;
top: 50%;
transform: translateY(-50%);

Question 7

আমার পরিবর্তনগুলির একমাত্র অবক্ষয় হ'ল আপনার একটি সেট ডিভি উচ্চতা ... আমি জানি না এটি আপনার পক্ষে সমস্যা কিনা না।

http://cssdesk.com/kyPhC