我正在创建在线商店。我想创建两列布局。左侧将是选项卡库。在右侧，我想显示购买选项，如尺寸，数量，颜色，购买按钮等。我正在使用引导程序。我想做这样的事情：网上商店这是我的代码笔：https://codepen.io/anon/pen/KYeWPj
我有这个代码：
/*google analytics js */* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
font-family: 'helvetive neue', sans-serif;
font-weight: 700;
}
.container {
width: 600px;
position: relative;
margin-top: 30px;
margin-left: 0px;
}
.thumbnails {
list-style: none;
font-size: 0;
margin-left: -2%;
}
.thumbnails li {
display: inline-block;
width: 23%;
margin-left: 2%;
text-align: center;
vertical-align: middle;
}
.thumbnails li:hover .item-hugger {
background: white;
}
.thumbnails li:hover .item-hugger .title {
color: #000;
}
.thumbnails input[name="select"] {
display: none;
}
.thumbnails .item-hugger {
position: relative;
height: 140px;
margin: 20px 0;
background: #f2f2f2;
transition: all 150ms ease-in-out;
}
.thumbnails label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.thumbnails .title {
padding: 20px 0 0;
font-size: 18px;
color: #555;
transition: all 150ms linear;
}
.thumbnails .thumb-image {
height: 100px;
padding: 20px 0;
}
.thumbnails .content {
position: absolute;
bottom: 0;
left: 0;
width: 600px;
height: 500px;
padding: 50px;
opacity: 0;
transition: all 150ms linear;
display: flex;
flex-direction: column;
justify-content: center;
}
.thumbnails .content .title {
font-size: 60px;
font-weight: 400;
display: inline-block;
color: #555;
border-bottom: 6px solid #fe7701;
padding: 50px 10px 0;
text-transform: uppercase;
}
.thumbnails input[name="select"]:checked+.item-hugger {
height: 180px;
margin: 0;
background: white;
}
.thumbnails input[name="select"]:checked~.content {
opacity: 1;
}
.white-box {
background: white;
height: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title style="margin-bottom: 10px;">Item</title>
</head>-->
<body>
<div class="container">
<h1 style="margin-top:40px; text-align:center">Item</h1>
<ul class="thumbnails">
<li>
<input type="radio" name="select" id="image1">
<div class="item-hugger">
<div class="title">Image 1</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=882" />
<label for="image1"></label>
</div>
<div class="content">
<div class="item-wrapper"> <img src="https://unsplash.it/1024/612?image=882" />
<div class="title">Image 1</div>
</div>
</div>
</li>
<li class="is-active">
<input type="radio" name="select" id="image2" checked>
<div class="item-hugger">
<div class="title">Image 2</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=782" />
<label for="image2"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=782" />
<div class="title">Image 2</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image3">
<div class="item-hugger">
<div class="title">Image 3</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=682" />
<label for="image3"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=682" />
<div class="title">Image 3</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image4">
<div class="item-hugger">
<div class="title">Image 4</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=582" />
<label for="image4"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=582" />
<div class="title">Image 4</div>
</div>
</div>
</li>
</ul>
<div class="white-box"></div>
</div>
</body>一个非常简单的方法是使用表格。它不需要任何CSS，只需要一个没有可见边框的简单表格。
执行此操作的方法是在要相互对齐的内容周围放置一个<tr>标签，并在<tr>标签周围放置一个<table>标签。它应该看起来像这样： <table><tr>YOUR ELEMENTS</tr></table> .
现在，将要并排对齐的每个元素放入自己的<td>标签中。这是它现在应该的样子：
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr></table>
这应该可以解决您的问题。如果您出于某种原因看到元素周围的边框，您可以<table style="border: none;">，而不仅仅是说<table>。希望这有帮助！