Html CSS初学者，帮助创建此布局？

在下图中，左边是html/css的输出，右边是我想要的布局

我对以下几点一无所知：

• 如何将标题居中
• 为什么标题会将“右上角”文本和按钮强制到下一行（与右上角的定向相反）
• 如何对齐文本区域，使其位于图像的右侧

左上角
标题
右上角
按钮
文本区
按钮2
.外边界{
边框：1px纯黑；
宽度：600px；
高度：500px；
}
.内边界{
边框：3倍纯黑；
宽度：400px；
高度：300px；
浮动：对；
}
.形象{
边框：1px纯黑；
显示：内联块；
宽度：50px；
高度：100px；
保证金：5px；
浮动：左；
}
.标题{
文本对齐：居中；
显示：内联块；
}
.按钮1{
浮动：对；
}
.按钮2{
浮动：对；
宽度：80px；
高度：60px；
}
.text_区域{
明确：两者皆有；
显示：块；
宽度：100%；
高度：150像素；
保证金：5px；
/*我不知道该如何定位*/
}
.左上角文字{
浮动：左；
}
.右上方\u文本{
浮动：对；
}

---

我做了一个JSFIDLE，检查一下这个，应该可以让您开始：）

html5

---

安静

我做了一个JSFIDLE，检查一下这个，应该可以让您开始：）

html5

---

安静

嗯，你的代码在很多lvl中都是错误的。我已经把它改成了你的形象。。。但这只是一个补丁。也许不是你想要的

作为简历：您希望一个容器的图像看起来像一列，而html的其余部分则保持为另一列

然后，正如您所做的，图像容器以50px的固定宽度向左浮动，但我们必须再添加10px，因为您已经给了容器5px的余量（5px right和left=10px）

然后我只添加一个容器，它将接收html的其余部分。然后很容易给容器留一个浮点数，其宽度为340px，因此布局的总宽度为400px

我添加了两个

框大小：边框框使边框位于容器内，且不会与固定宽度混淆

然后我添加了
.header{float:left；}
作为您的代码，您有一个名为
的类，这个类甚至没有在html中使用。然后在h2上留一点边距，将其与左上角分开

这里有
嗯，您的代码在许多lvl中都是错误的。我已经把它改成了你的形象。。。但这只是一个补丁。也许不是你想要的

作为简历：您希望一个容器的图像看起来像一列，而html的其余部分则保持为另一列

然后，正如您所做的，图像容器以50px的固定宽度向左浮动，但我们必须再添加10px，因为您已经给了容器5px的余量（5px right和left=10px）

然后我只添加一个容器，它将接收html的其余部分。然后很容易给容器留一个浮点数，其宽度为340px，因此布局的总宽度为400px

我添加了两个
框大小：边框框使边框位于容器内，且不会与固定宽度混淆

然后我添加了
.header{float:left；}
作为您的代码，您有一个名为
的类，这个类甚至没有在html中使用。然后在h2上留一点边距，将其与左上角分开

这里有一个关键点，那就是将布局视为一个包含两列的布局。我认为标记应该是这样的：

<div id='demo'>
    <div class='col1'>
        <img src='http://www.placehold.it/50x100' />
    </div>
    <div class='col2'>
        <div class='header'>
            <span class='left'>left</span>
            <span class='right'>
                <button>button</button>
                right
            </span>
            <h2>center</h2>
        </div>
        <textarea>Lorem ipsum</textarea>
        <button>button</button>
    </div>
</div>

注意，我使用了尽可能少的固定尺寸。只是因为它会使你的布局更容易适应不同的内容和不同的屏幕大小

我已经把你的代码放在我的提案旁边了。我认为代码应该是相当简单和不言自明的，但是如果有什么不清楚的地方，请随意询问。
关键在于将布局视为一个包含两列的布局。我认为标记应该是这样的：

<div id='demo'>
    <div class='col1'>
        <img src='http://www.placehold.it/50x100' />
    </div>
    <div class='col2'>
        <div class='header'>
            <span class='left'>left</span>
            <span class='right'>
                <button>button</button>
                right
            </span>
            <h2>center</h2>
        </div>
        <textarea>Lorem ipsum</textarea>
        <button>button</button>
    </div>
</div>

注意，我使用了尽可能少的固定尺寸。只是因为它会使你的布局更容易适应不同的内容和不同的屏幕大小

我已经把你的代码放在我的提案旁边了。我认为代码应该是相当简单和自解释的，但是如果有什么不清楚的地方，请随意询问。
这里有另一个fiddle，它使用“calc”操作将textarea设置为div的剩余宽度

这是小提琴

我将这个图像包装起来，将高度设置为100%，然后使用CSS将其余元素修改为正确

.outer_border {
 border: 1px solid black;
 width: 600px;
 height: 500px;
}

.inner_border {
 border: 3px solid black;
 width: 400px;
 height: 300px;
}
#tall{
 height:100%;
 float:left;
}
.image {
 border: 1px solid black;
 display: inline-block;
 width: 50px;
 height: 100px;
 margin: 5px;
 float: left;
}
.the_header {
 text-align: center;
 display: inline-block;
}
h2 {
 display:inline;
}

.button1 {
 float: right;
}

.button2 {
 width: 80px;
 height: 60px;
 display: block;
 float:right;
}

.text_area {
  clear: both;
  display: inline;
  width:auto;
  height: 150px;
  margin-right: 0;
}

.upper_left_text {
 float: left;
}

.upper_right_text {
 float: right;
}

.text_area{
  width:calc(100% - 70px);
}

下面是另一个fiddle，它使用“calc”操作将textarea设置为div的剩余宽度

这是小提琴

我将这个图像包装起来，将高度设置为100%，然后使用CSS将其余元素修改为正确

.outer_border {
 border: 1px solid black;
 width: 600px;
 height: 500px;
}

.inner_border {
 border: 3px solid black;
 width: 400px;
 height: 300px;
}
#tall{
 height:100%;
 float:left;
}
.image {
 border: 1px solid black;
 display: inline-block;
 width: 50px;
 height: 100px;
 margin: 5px;
 float: left;
}
.the_header {
 text-align: center;
 display: inline-block;
}
h2 {
 display:inline;
}

.button1 {
 float: right;
}

.button2 {
 width: 80px;
 height: 60px;
 display: block;
 float:right;
}

.text_area {
  clear: both;
  display: inline;
  width:auto;
  height: 150px;
  margin-right: 0;
}

.upper_left_text {
 float: left;
}

.upper_right_text {
 float: right;
}

.text_area{
  width:calc(100% - 70px);
}

你能包括你目前拥有的html/css吗？我在正确格式化它时遇到了麻烦，现在我包括了它。放一个js提琴更容易帮助人们：）你的标题有一个选项，如果你想让它位于内边框div的中心，您可以将
位置：相对
添加到
内边框
和
位置：绝对；左：40%到您的
标题
div。调整左侧百分比以使其居中。我不推荐，但这是一个选择。一个简单而干净的布局，如
#demo {
    border: 2px solid black;
    padding: 10px;
}
#demo .col1, #demo .col2 {
    display: inline-block;
    vertical-align: top;
}
#demo .col2 {
    width: calc(100% - 60px);
}
#demo .left {
    float: left;
}
#demo .right {
    float: right;
}
#demo .header {
    text-align: center;
}
#demo textarea {
    width: 100%;
    min-height: 100px;
    margin: 8px 0;
}
#demo button {
    float: right;
    margin-left: 8px;
}

.outer_border {
 border: 1px solid black;
 width: 600px;
 height: 500px;
}

.inner_border {
 border: 3px solid black;
 width: 400px;
 height: 300px;
}
#tall{
 height:100%;
 float:left;
}
.image {
 border: 1px solid black;
 display: inline-block;
 width: 50px;
 height: 100px;
 margin: 5px;
 float: left;
}
.the_header {
 text-align: center;
 display: inline-block;
}
h2 {
 display:inline;
}

.button1 {
 float: right;
}

.button2 {
 width: 80px;
 height: 60px;
 display: block;
 float:right;
}

.text_area {
  clear: both;
  display: inline;
  width:auto;
  height: 150px;
  margin-right: 0;
}

.upper_left_text {
 float: left;
}

.upper_right_text {
 float: right;
}

.text_area{
  width:calc(100% - 70px);
}