将div向左和居中对齐
将div向左和居中对齐
提问于 2018-04-30 21:47:21
A)我希望我的滤镜div与产品的左侧对齐，而不是在产品上方。
B)我希望products div中的文本更接近图像，而不是像下面的预览中那样远离图像。
我使用的是php laravel。
我该如何实现这一点？
代码如下：
@extends('layouts.app')
@section('content')
<div id="container">
<h1> Filters </h1>
{!! Form::open(['action' => 'PostsController@store', 'method' =>'POST']) !!}
<div class="form-group">
{{ Form::checkbox('agree', 'yes') }} {{Form::label('id', 'ID')}} <br>
{{ Form::checkbox('agree', 'yes') }} {{Form::label('id', 'ID')}}
</div>
{{--{{Form::submit('Submit', ['class'=>'btn bt-primary'])}}--}}
{!! Form::close() !!}
<h1>Products</h1>
@if(count($products) > 0)
@foreach($products as $product)
<div class="well">
<div class="row">
<div class="col-md-4 col-sm-4">
<img style="width:40%" src="/{{$product->photo}}">
</div>
<div class="col-md-2 col-sm-2">
<h3><a href="/products/{{$product->id}}">{{$product->name}}</a></h3>
<small> {{$product->description}}</small>
</div>
</div>
</div>
@endforeach
@else
<p>No posts found</p>
@endif
</div>
@endsection任何帮助都将不胜感激。谢谢!
回答 2
Stack Overflow用户
发布于 2018-04-30 22:54:58
我想这条路
<div class='row'>
<div class='col-md-4'>
<!--code for filters-->
</div>
<div class='col-md-8'>
<div class='col-md-4'>
<!--code for Image-->
</div>
<div class='col-md-8'>
<!--code for Desciption-->
</div>
</div>
</div>根据喜好使用col-md-* col-sm-*。如果图像较小以适合col 4，则放大图像或缩小col*
Stack Overflow用户
发布于 2018-05-25 02:29:39
这样就可以了：
Filters:
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">image tag here </div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">description here</div>
</div>这里有一个指向它的链接，只需调整输出窗口的大小即可查看https://jsfiddle.net/pjozbeye/1/效果
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50101890
复制相关文章
相似问题
腾讯云开发者
