Question

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

我非常无能为力：

如何居中标题
为什么'右上'文字和按钮被标题强制到下一行（与右上方的方向相反）
如何对齐文本区域以使其位于图像右侧

 override func didMoveToView(view: SKView) {
    /* Setup your scene here */
    var sun = SKSpriteNode(imageNamed: "Sun")
    sun.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame))
    sun.xScale = 0.2
    sun.yScale = 0.2
    addChild(sun)
}

enter image description here

Answer 1

我做了一个jsfiddle，检查这个，应该让你开始：）

https://jsfiddle.net/fazbyxyq/

HTML5

    <form action="foo" method="post">
        {% csrf_token %}   
        {{ form }}
        <input type="submit" value="submit"/>
    </div>

CSS3

<div class="right">
    <div>upper left</div>
    <div>header</div>
    <div>upper right</div>
    <div><textarea>textarea</textarea></div>
    <div>button2</div>
</div>

和平了！

Answer 2

好吧，你的代码在许多lvl中都是错误的。我把它固定在你的形象中......但它只是一个修复。也许不是你想要的。

作为简历：您希望带有图像的容器看起来像一列，其余的html保留为另一列。

然后，正如您所做的那样，图像容器向左浮动，固定宽度为50px，但我们必须增加10px，因为您已经为容器提供了5px的边距（5px左右= 10px），

然后我只添加一个容器，它将接受其余的html。这样容易给容器留下一个浮子，宽度为340px，所以你的布局总和就是400px。

我添加了private XYPlot plot; private Button addGlucoseLevel; private EditText glucoseField; private XYSeries currentSeries; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); addGlucoseLevel = (Button) findViewById(R.id.enterGlucoseButton); glucoseField = (EditText) findViewById(R.id.enterGlucoseLevel); currentSeries = new SimpleXYSeries(Arrays.asList(new Number[] { 7200, 8, 54000, 2, 64800, 4 }), SimpleXYSeries.ArrayFormat.XY_VALS_INTERLEAVED, "Glucose Level"); //Create an series of numbers to plot. createGraph(currentSeries); }以使边框位于容器内部而不会弄乱固定宽度。

然后我刚刚添加box-sizing: border-box;，因为你的代码基本上是你有一个名为.header {float:left;}的类，甚至在html中都没有使用。然后从h the_header

分配一些余量到h2

这里有 fiddle

Answer 3

该键将您的布局视为具有2列的布局。我相信标记应该是这样的：

<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>

要在图像中获得结果，您应该添加以下css：

#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;
}

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

我已将您的代码放在我的提案旁边fiddle。我认为代码应该是相当容易和自我解释的，但随时可以询问是否有任何不清楚。

Answer 4

这是另一个使用“calc”操作来设置textarea div的剩余宽度的小提琴。

这是小提琴http://jsfiddle.net/SteveRobertson/tyokk1qj/

我将此图像包装并将高度设置为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);
}

CSS初学者，帮助创建这个布局？

4 个答案: