تحديد المواقع ثلاثة div مع CSS

Question

من يحب الألغاز؟;)

لدي ثلاثة أقسام:

<div id="login" />
<div id="content" />  
<div id="menu" />  

كيف يمكنني تحديد أنماط CSS (دون لمس HTML) بحيث يكون Menu-div هو العمود الأيسر، وlogin-div في العمود الأيمن، وcontent-div أيضًا في العمود الأيمن ولكن أسفل تسجيل الدخول-div.

عرض كل div ثابت، لكن الارتفاع ليس كذلك.

Answer 1

#menu {
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
#content, #login {
  margin-left:120px;
}

لماذا بهذه الطريقة؟القائمة التي تأتي في آخر علامة الترميز تجعل الأمر صعبًا.قد تتمكن أيضًا من تعويم كل من المحتوى وتسجيل الدخول بشكل صحيح، وإضافة واضح:الحق إلى المحتوى، ولكن أعتقد أن هذا قد يكون أفضل رهان لك.وبدون رؤية الصورة الأكبر، من الصعب تقديم حل يناسب حالتك بالتأكيد.

---

يحرر:يبدو أن هذا يعمل أيضًا:

#content, #login {
  float:right;
  clear:right
}

---

المزيد من الأفكار:لن يعمل الموضع المطلق (أو لن يعمل بشكل جيد) إذا كنت تريد أن تكون الأعمدة في تخطيط مركزي.يبدو أن العوامة تعمل - طالما يمكنك الحصول على أي متطلبات من نوع الحدود بين الأعمدة لتتوافق مع الحل العائم، فقد يكون من الأفضل لك اختيار ذلك.ثم مرة أخرى، إذا كان من المفترض أن يظل الموقع محاذيًا، فأعتقد أن الطريقة المطلقة ستعمل بشكل جيد جدًا لتلبية احتياجاتك.

Answer 2

يطفو بعيدا...ليس مثاليا. إجابة كريس يبدو حلا أفضل.

#login {
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#content {
  clear: right;
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#menu {
  float: left;
  width: 400px;
  border: 1px solid #f00;
}

<div id="login">Login</div>
<div id="content">Content</div>
<div id="menu">Menu</div>