Question

我试过在段落旁边放一个转换div，但由于某种原因它不起作用？我对html不是很好，所以有人可以帮助我吗？

.left {
float: left;
clear: both;
width: 200px;
    overflow: hidden;
margin-right: 0px;
padding-right: 0;
text-decoration: none;
display: table-column;
}

.right {
width: 50%;
float: right;
overflow: hidden;
text-align: right;
display: table-column;
}

.left, .right {
display: table-column;
}


</style>
</head>
<body>

<div id="conta">
<div class="left" id="top"><a href="new.png">home<a></div>
<div class="left"><a>about</a></div>
<div class="left"><a>projects</a></div>
<div class="left"><a>blog</a></div>
<div class="left"><a>contact</a></div>

<p class="right"><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper interdum facilisis. Quisque imperdiet purus ac tellus ultrices ultricies. Sed massa arcu, sagittis quis tellus laoreet, dapibus dictum neque. Nam fermentum enim ligula, quis vulputate arcu molestie et. Sed libero turpis, ultricies id pulvinar non, suscipit ut turpis. Ut nec nisl a odio laoreet commodo ac vitae orci. In eget sem luctus, pellentesque tellus eu, cursus nisl. Duis fringilla tellus quam, sit amet mollis lacus volutpat vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ultrices nibh id lacus molestie porttitor. Proin quis euismod lectus. Vestibulum a elit mollis, maximus diam ac, consequat ante.</a></p>

</div>
<div class="clear"></div>

Full Code Here

Answer 1

我并不完全确定你在问题中要求解决的问题，但我只是假设你希望正确<div>与顶部平行导航。

我唯一改变的是：

.right {
    width: 50%;
    float: right;
    overflow: hidden;
    text-align: right;
    position: relative;
    margin-top: -375px;  // Added this

}

由于div开始重叠，因此在移动设备上看起来不太好看，因此您需要执行@media css语句以在一定宽度后更新代码：

@media all and (max-width: 700px) {
.right {
    margin-top: 0px;
    }
}

这里是jsFiddle：http://jsfiddle.net/wdrpkjap/5/

带有过渡和div的两列布局？

1 个答案: