在我目前的代码中,上传的图片位于表格的顶部,但由于我正在创建的网站布局如此之宽,我想将图片放在桌子旁边,我该如何修复我的代码是为了实现这个目标吗?
我的节目文件
<body>
<div class = "head1">
<h1>Inventory Information</h1>
<div class = "image1" >
<img src= "http://dx.deucex.com/i/logo.png" >
</div>
</div>
</body>
<aside>
<%= render @inventory.photos %>
<h3>Add a photo:</h3>
<%= render 'photos/form' %>
<div class = "inventory_border" >
<table>
<tr>
<p>
<td><strong>Product Name:</strong></td>
<td><%= @inventory.product_name %></td>
</p>
</tr>
<tr>
<p>
<td><strong>Brand Name:</strong></td>
<td><%= @inventory.brand_name %></td>
</p>
</tr>
#more code...
</table>
</div>
<%= link_to 'Back', inventories_path %>
</aside>
CSS
body
{
background: #e6f2ff;
}
input[type=text]{
width: 20%;
padding: 12px 12px;
border: 2px solid #ccc;
background-color: white;
}
textarea {
width: 20%;
height: 10px;
padding: 12px 12px;
border: 2px solid #ccc;
background-color: white;
resize: none
}
h1{
background-color: #ccccff;
width: 400px;
height: 50px;
border: 7px solid #333333;
border-radius: 20px;
padding-left: 20px;
padding-top: 10px;
margin-left: 5px;
margin-top: 30px;
border-style: double;
}
.vend2{
background-color: white;
width: 1800px;
margin-left: -8px;
}
.invent{
background-color: white;
width: 1800px;
margin-left: -8px;
}
table{
width: 800px;
}
th{
background-color: #b3b3cc;
border-radius: 4px;
border: 2px solid black;
width: 365px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
input[type = buttton], input[type = submit], {
background-color: #ccddff;
border: solid;
border-radius: 3px;
color: black;
padding: 16px 20px;
text-decoration: none;
cursor: pointer;
}
input[type = buttton]:hover, input[type = submit]:hover, {
background-color: blue;
border: solid;
border-radius: 3px;
color: white;
padding: 16px 20px;
text-decoration: none;
cursor: pointer;
border-color:black;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
h2{
background-color: red;
border: none;
width: 750px;
}
.head{
display:flex;
background-color: #e6e6e6;
min-width: 140%
}
.head1{
display:flex;
background-color: #e6e6e6;
min-width: 140%
}
div.head {
border-bottom: 3px outset black;
border-top: 30px outset gray;
margin-top: -50px;
margin-left: -8px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-bottom: 60px;
}
div.head1 {
border-bottom: 3px outset black;
border-top: 30px outset gray;
margin-top: -50px;
margin-left: -8px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-bottom: 60px;
}
div.header{
font-size: 40px;
margin-left: 50px;
}
div.image1{
margin-left: 100px;
}
.inventory_border{
border-top: 3px solid black;
max-width: 50%
}
.vendor_border{
border-top: 3px solid black;
max-width: 70%
}
div.field{
background-color: #e6e6e6;
max-width: 30%;
border: 1px solid black;
}
aside{
margin-left: 50px;
}
article{
margin-left: 800px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}