并排呈现并堆叠的Div

在hero-unit DIV嵌套我想有两个div在宽屏幕并排呈现，边，如：叠

|text 30% container width||picture the rest of container width|

和在窄屏幕（智能电话）：

|text full container width| 
|picture full container width|

有什么想法？

来源

2013-05-01 naio

什么...... – 2013-05-01 22:35:11

你可以张贴一些截图或图表吗？ – 2013-05-01 22:37:23

你只需要浮动两个div并使用媒体查询。请看 – Swordfish0321 2013-05-01 22:37:57

你就不能使用内置的网格系统？

<div class="hero-unit"> 
    <div class="row-fluid"> 
    <div class="span3">text</div> 
    <div class="span9"><img src="img.jpg"></div> 
    </div> 
</div>

来源

2013-05-02 02:44:23 dave

它的工作原理！我确实尝试过，但是排队，而不是排队。 – naio 2013-05-02 13:03:13

使用media queries为不同大小的屏幕创建不同的样式。

对于全尺寸屏幕，你可以这样做：

<div id="left" class="cont"> 
</div> 

<div id="right" class="cont"> 
</div>

CSS：

#left{ 
    float: left; 
    width: 30%; 
} 
#right{ 
    overflow: hidden; 
}

上述布局将有left DIV浮动到左侧，与30%的宽度和正确的div将占用剩余空间。

对于手机屏幕，你的CSS会略有不同。

<div id="left" class="cont"> 

</div> 

<div id="right" class="cont"> 

</div>

CSS：

.cont{ 
    width: 100%; 
    float: left; 
    clear: both; 
    /* Margins, padding, etc. */ 
}

来源

2013-05-01 22:37:31

这应该肯定会工作，但我需要学习媒体查询，因为我从来没有使用过它们。我认为在Bootstrap框架内可以有一个更简单的解决方案。不管怎么说，还是要谢谢你。 – naio 2013-05-01 22:52:06

@naio要使用媒体查询，您只需编写@media（page-width） - 只要看看我发给你的内容，如果我没有记错，引导程序已经使用它们，所以你甚至不需要这样做。所有你需要做的就是添加我添加的CSS – 2013-05-01 23:06:42

并排呈现并堆叠的Div

回答

相关问题