我想创建一个 2 文本列，中间有一个 div，如下所示。
我正在使用这段代码：
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
当我在 div 类中放置另一个 div 时，它的格式会分为两列。我该如何解决？
问问题
826 次
5 回答
1
使用以下 CSS：
<style type="text/css">
.container{ background:#00FF00;width: 844px;text-align:center; margin: 0px auto;border: 1px solid #CCCCCC;height: 450px;}
.columns {background:#FF0000; width: 400px;border: 1px solid #595959; height: 450px;text-align:left;float:left; padding: 10px;left:5%;}
.popup_middle_content{background:#FFFFFF; border: solid 1px black; position: absolute; left: 50%; top: 50%;background-color: white;z-index: 1; height: 50px; margin-top: -150px; width: 200px;margin-left: -100px; }
</style>
并检查以下这些 div：
<div class="container">
<div class="columns">Left Paragraph contents...</div>
<div class="columns">Right Paragraph contents...</div>
<div class="popup_middle_content">CENTER DIV content...</div>
</div>
它对我有用。我希望这对你有帮助。
于 2013-11-29T12:05:49.240 回答
1
回答您保留 css 列的请求。
根据@Josh 的建议，从这里获得了这个想法：http ://css-tricks.com/float-center/ 。
看到你的这个更新的小提琴：http: //jsfiddle.net/aX47K/99/
诀窍是在每一列（由 div 表示）上使用 css:before或伪元素，具有固定的宽度和高度并浮动相反。:after这将创建一个虚拟空间，然后我们可以使用绝对定位填充我们的图像（或另一个 div）。
/* the overall wrapping div acting as newspaper */
div.paper { position:relative; }
/* the div holding the columns */
div.wrap {
column-count:2;
text-align: justify;
}
/* the dummy space created from individual divs holding the content */
#col-1:before, #col-2:before {
content: "";
width: 140px;
height: 160px;
}
#col-1:before {
float: right;
}
#col-2:before {
float: left;
}
/* the image will then be placed in the dummy space created above */
img {
width: 240px;
position:absolute;
top: 10%; left: 33%;
}
但是，请注意，这种方法仍然是一种 hack。
于 2013-12-26T13:54:31.820 回答
0
您需要为
只需检查以下示例
<div class="newspaper">enter code here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lo`enter code here`bortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
</div>
<div class="newspaper">
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
<div class="">
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</div>
于 2013-12-26T12:45:18.493 回答
0
我想你早就完成了这个，但我有一个例子here可能被证明是有用的。这里有一些细微差别，除非有人问，否则我不想解释。我认为通过一点 jQuery，我们可以确定它。
这是我的小提琴示例。它也是响应式的，因此您可以展开窗口来查看它。再一次，它很快就完成了。如果您选择响应式容器，只需寻找细微的断点。
img {
width:auto;
height:5em;
}
#right img {
padding:1.5em 1.5em 1em 0;
}
#left img {
padding:1.5em 0 1em 1.5em ;
}
#right {
float:left;
margin-left:-5.5em;
}
#left {
float:right;
margin-right:-5.5em;
}
于 2014-06-24T19:07:46.427 回答
-2
尝试为所有内容创建单独的 div 类，并将 div 类放置在您想要的位置。不要创建 Div 标签，只需创建类！
于 2013-11-06T16:55:05.290 回答