Question

我无法让.block-description和.block-img在包装.block内相互坐在一起。

.block { 
background-color:#E3DF8A;
width:100%;
 }

.block-description {
display: inline-block;
width:50%;
}

.block-img{
display: inline-block;
width:50%;
}

http://jsfiddle.net/6z23v1e8/

Answer 1

可能display: table可以解决问题

＆＃13;

#right-panel {
    background-color:#DB9395;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: auto;
}
.block {
    background-color:#E3DF8A;
    width:100%;
    display: table;
    table-layout: fixed;
}
.block-description {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 50%;
}
.block-img {
    display: table-cell;
    width:100%;
}

＆＃13;

<div id="right-panel">
  <div class="block" id="1">
    <div class="block-description">
      <span class="block-description-span">Modurra Shelving</span>
    </div>
    <img class="block-img" alt="" src="http://www.newton.ac.uk/files/covers/968361.jpg">
  </div>
</div>

＆＃13;

Answer 2

尝试更改

.block {
background-color:#E3DF8A;
width:100%;
}

到

.block {
background-color:#E3DF8A;
width:100%;
white-space:nowrap;
}

http://jsfiddle.net/6z23v1e8/1/

Answer 3

您可以使用

.block:after {
    display: block;
    content: " ";
    clear: both;
}
.block-description {
    display: inline-block;
    width:50%;
}
.block-img {
    display: inline-block;
    width:50%;
    float: left;
}

要切换前面的块，只需将浮动切换到另一个元素。

小提琴：https://jsfiddle.net/mudd2L0g/

Answer 4

您可以使用Flexible Boxes模型实现这一目标，该模型是一种新的布局模式，通过替换float:属性来改进标准盒模型。

出于浏览器兼容性原因，使用 灵活方框 ，请参阅此内容 - Compatibility Chart

我在下面的示例代码中使用了HTML5语义标签（部分，图形，文章），为您的页面内容增加了清晰度和“权威”含义，增加了搜索引擎优化。

相关信息

Here is the JSFiddle Demo

屏幕截图：

// HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css"
</head>
<body>
    <section id="left-panel"></section>
    <section id="right-panel">
        <article>
            <figure>
                <img src="http://www.newton.ac.uk/files/covers/968361.jpg">
            </figure>
            <h1>Modurra Shelving</h1>
        </article>
    </section>
</body>
</html>

// CSS

body{
    margin: 0 !important;
    width: 100vw;
    height: 100vh;

    display: -webkit-flex;
    display: flex;
}   
#left-panel{
    background: #5c5c5c;
    -webkit-flex: 1;
    flex: 1;
}
#right-panel{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-flex: 1;
    flex: 1;
    background: #ECF0F1;    
}
article{
    display: -webkit-flex;
    display: flex;  
}
h1{
    -webkit-align-self: center;
    align-self: center;
}

让div坐在另一个旁边

4 个答案:

相关信息