div 表格布局_探索Div和表格布局的乐趣

div 表格布局

内容 (Contents)

• Introduction

  介绍

• • Float vs. Inline Block

    浮动与串联块

  • • Lesson 1 - Your Editor Is Messing With Your Head

      第1课-编辑对您的想法感到困惑

    • Lesson 2 - Your Minimizer Will Mess With Your Head Too

      第2课-最小化器也会让您的头陷入困境

    • Lesson 3 - All the Solutions Are Bad

      第3课-所有解决方案均不正确

    Reading Between the Lines

    字里行间

  Basic Layout

  基本布局

• • Lesson 3 - Floats, Not Inline-Block

    第3课-浮动而不是串联块

  • Lesson 4 - Always Test Different Widths

    第4课-始终测试不同的宽度

  • Vertical Element Positioning

    垂直元素定位

  • Clearing Float and Inline Block

    清除浮动和内联代码块

  • Fixed Width Left and Right Divs

    固定宽度左右格

  • Div Scrolling

    分区滚动

  Left, Center, and Right, Atten-hup!

  左，中和右，参加比赛！

• • Lesson 5 - Hidden Spacing

    第5课-隐藏间距

  • Fixed Width Columns

    固定宽度列

  • Column Scrolling

    列滚动

  Using Tables instead of Divs

  使用表格代替Divs

• Conclusion

  结论

介绍 (Introduction)

This is a straightforward article demonstrating some very basic UI layout concepts using either DIV or TABLE elements. The impetus for this is simply that I often struggle with figuring out the nuances of how to position elements in the UI so I get both the look and behavior that I want. By look, I mean the positioning of sections of the UI and the elements within those sections, and by behavior, I mean how the UI behaves when the browser window is resized. I'm not covering things like device screen sizes or replacing a menu bar with a "triple bar" dropdown -- there are component libraries like Bootstrap to handle that.

这是一篇简单的文章，演示了使用DIV或TABLE元素的一些非常基本的UI布局概念。 这样做的动力很简单，就是我经常要弄清楚如何在UI中放置元素的细微差别，以便获得所需的外观和行为。 通过外观，我是指UI的各个部分的位置以及这些部分中的元素，并且通过行为，是指调整浏览器窗口大小时UI的行为。 我没有介绍设备屏幕尺寸或用“三栏”下拉菜单替换菜单栏的问题，而是通过Bootstrap这样的组件库来处理。

All of these examples can be coded in Visual Code and viewed side-by-side with Quick HTML Previewer, which of all the HTML preview plugins that I looked at is the only one that I found actually works.

所有这些示例都可以用Visual Code编码，并可以与Quick HTML Previewer并排查看，在我查看的所有HTML预览插件中，我发现这是唯一可以实际使用的插件。

基本布局 (Basic Layout )

Let's start with something basic -- two inline divs. The HTML:

让我们从基本的东西开始-两个内联div 。 HTML：

<p>Two inline divs:</p>
<div class='border1 quarter inline'>Div 1</div>
<div class='border1 quarter inline m10'>Div 2</div>

And the CSS I'm using to define the border, width, margin, and inline styles:

我用来定义边框，宽度，边距和内联样式CSS：

.border1 {
  border-style:solid;
  border-width: 1px;
}

.quarter {
  width: 25%; 
}

.inline {
  display: inline-block;
}

.m10 {
  margin-left:10px;
}

Yielding:

屈服：