我想做一个编辑器,左边是代码,右边是结果。
为什么<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!
答案 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;
声明的工作原理应该如此。