文本转换时如何避免Div重叠

Question

我试图将div中的文本设计为垂直，我看到div彼此重叠。我怎么能避免这种情况？此外，顶部div的边框不可见。

public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.get("http://www.myhomepay.com/Tour/Nanny-Tax-Guide");
        driver.manage().window().maximize();

        // first identify the play button over the youtube video player

        // Please note youtube palyer is inside the iframe hence first we have 
        // to identify and then switch to the i fame

        List<WebElement> iframe = driver.findElements(By.tagName("iframe"));
        System.out.println("Total iframe on the webpage is : "+ iframe.size());
        driver.switchTo().frame(iframe.get(0));
        driver.findElement(By.cssSelector(".ytp-large-play-button.ytp-button")).click();
    }

Answer 1

由于旋转而重叠。您的div 576px宽，393px高。默认情况下，旋转点位于中心，因为您的框的宽度大于高度，所以它会重叠。如果您希望保证金显示为25px，请应用以下边距：

top, bottom: (576 - 393) / 2 + 25 = 116.5
left, right: (393 - 576) / 2 + 25 = -66.5

代码如下所示：

margin: 117px -67px;

希望这有帮助！

小提琴：https://jsfiddle.net/yq4ob9ao/1/

＆＃13;

＆＃13;

#div1, #div2 {
    width: 576px;
    border: 1px solid black;
    margin: 117px -67px;
    padding: 25px;
    text-align: center;
    height: 393px;
    transform: rotate(90deg);
    float:left;
    clear: left;
}

＆＃13;

<div id="div1">
    <br><br><br><br><br><br><br><br>
    <div>
        <h5>TEST</h5></div><br>
    <span>1/2</span>
</div>
<div id="div2">
    <br><br><br><br><br><br><br><br>
    <div>
        <h5>TEST</h5></div><br>
    <span>2/2</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的边距是在transform: rotate属性转换div之前计算的。您需要更新各个div的顶部边距以调整其位置。

在FIDDLE中，我使用margin-top: 100px;表示第一个div，margin-top: 160px;表示第二个div作为示例。