Question

    |       |
    | image |      Series of Logos
    |   &   |
    | text  |--------------------------------
    |-------|       |       |       |       |
    |       | Links | Links | Links | Links |
    | icons |       |       |       |       |
    |       |       |       |       |       |

我正在使用bootstrap并尝试在html / css中找到一种方法。

棘手的部分是“Logos系列”区域。有人可以提供示例代码或让我知道如何解决这个问题吗？

Answer 1

我不知道你是否这样问过，但它会给出一些想法：

FIDDLE

<强> HTML：

<div id="fullPage">
<div id="sideBar">
    <div id="imgSideBar"><img src="smiley.gif" alt="Smiley face" width="42" height="42">
        <p>This is side bar</p></div>
        <div id="iconSideBar"><span>This space for icons</span></div>
</div>
    <div id="mainPage"></div>
    <div id="link1">
    <div class="link">link 1</div>
    <div class="link">link 2</div>
    <div class="link">link 3</div>
        <div class="link">link 4</div></div>
    </div>

<强> CSS：

body{margin:0px;

  }
#fullPage{
    width:1368px;

    height:700px;
}
#sideBar{
    width:100px;
    height:400px;
    border:1px solid red;
    border-top:none;
    border-bottom:none;
}
#imgSideBar{height:200px;}
#iconSideBar{border-top:2px solid red;}
#mainPage{margin-top: -400px;
margin-left: 101px;width:400px;height:180px;border:1px solid red;}
.link{
    border-right: 1px solid red;
height: 180px;
width: 100px;
margin-left: 121px;
display: table-cell;
}
#link1{margin-left: 110px;
margin-top: 35px;}

Answer 2

您可以在html中执行类似以下布局的操作，但这取决于您希望系列徽标的显示方式。为了方便起见，您可能需要确保徽标是固定大小的，这样您就不会得到一些奇怪的包装。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            <div class="row">           
                <div class="logo col-xs-12">
                    <img src="images/image.png" alt="Image">
                </div>
                <div class="col-xs-12">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, eos earum enim.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6"><img src="images/icon.png" alt="This is an icon"></div>
                <div class="col-xs-6"><img src="images/icon.png" alt="This is an icon"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-8">
            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-4 col-sm-2 logo"><img src="images/logo.png" alt="This is an logo"></div>
                    <div class="col-xs-4 col-sm-2 logo"><img src="images/logo.png" alt="This is an logo"></div>
                    <div class="col-xs-4 col-sm-2 logo"><img src="images/logo.png" alt="This is an logo"></div>
                    <div class="col-xs-4 col-sm-2 logo"><img src="images/logo.png" alt="This is an logo"></div>
                    <div class="col-xs-4 col-sm-2 logo"><img src="images/logo.png" alt="This is an logo"></div>
                    <div class="col-xs-4 col-sm-2 logo"><img src="images/logo.png" alt="This is an logo"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-md-3"><a href="#">link</a></div>
                <div class="col-xs-6 col-md-3"><a href="#">link</a></div>
                <div class="col-xs-6 col-md-3"><a href="#">link</a></div>
                <div class="col-xs-6 col-md-3"><a href="#">link</a></div>
            </div>
        </div>
    </div>
</div>

然后，您将使用以下css将图像保留在其列中。

<style>
    img {max-width:100%; height:auto;}
</style>

在html / css中实现一个非常棘手的设计

2 个答案: