两列使用全宽,第一列是可调整大小的文本区域

时间:2016-11-21 22:50:04

标签: html css

我想做一个编辑器,左边是代码,右边是结果。

为什么<div>#right的文字贴在白/蓝边界?为什么没有填充? (我想要10 px填充)。

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; overflow: hidden; }
.column { padding: 10px; overflow: y-scroll; height: calc(100% - 20px); }
#writing { min-width: 1px; max-width: 99%; float: left;  width: 50%; resize: horizontal;  }
#right { background-color: blue; }
<textarea id="writing" class="column">you can drag the width of this column with bottom right corner: resize </textarea>
<div id="right" class="column">
Why is this sticked to the white/blue boundary ? why no padding? I want a 10 px padding!

2 个答案:

答案 0 :(得分:1)

#right分布在浮动textarea下,您的文字远离填充,它由浮动textarea推动。

您可以重置非浮动元素的block formating context。例如溢出

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; overflow: hidden; }
.column { padding: 10px; overflow: y-scroll; height: calc(100% - 20px); }
#writing { min-width: 1px; max-width: 99%; float: left;  width: 50%; resize: horizontal;  }
#right { background-color: blue;overflow:hidden; }
<textarea id="writing" class="column">you can drag the width of this column with bottom right corner: resize </textarea>
<div id="right" class="column">
Why is this sticked to the white/blue boundary ? why no padding? I want a 10 px padding!

为代码设置透明背景,并在悬停时添加溢出以查看其功能:

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; overflow: hidden; }
.column { padding: 10px; overflow: y-scroll; height: calc(100% - 20px); }
#writing { min-width: 1px; max-width: 99%; float: left;  width: 50%; resize: horizontal;background:transparent;  }
#right { background-color: blue;border:solid; }
#right:hover {overflow:hidden;}
<textarea id="writing" class="column">you can drag the width of this column with bottom right corner: resize </textarea>
<div id="right" class="column"><b>HOVER ME</b>
Why is this sticked to the white/blue boundary ? why no padding? I want a 10 px padding!

答案 1 :(得分:1)

如果你更正

public class Circle {
    private double radius;

    public Circle(double inRadius) throws ShapeException {
        if(inRadius < 0.0) {
            throw new ShapeException("Shape Exception Occurred...");
        } else {
            radius = inRadius;
        }
    }

    public double getRadius() {
        return radius;
    }

    public void setRadius(double newRadius) throws ShapeException {
        if(newRadius < 0.0) {
            throw new ShapeException("Shape Exception Occurred...");
        } else {
            radius = newRadius;
        }
    }

    public double area() {
        return Math.PI * radius * radius;
    }

    public void stretchBy(double factor) throws ShapeException {
        if(factor < 0.0) {
            throw new ShapeException("Shape Exception Occurred...");
        } else {
            radius = radius * factor;
        }
    }

    @Override
    public String toString() {
        return "Circle Radius: " + radius;
    }
}

overflow: y-scroll;

你会发现overflow-y: scroll; 声明的工作原理应该如此。