Z
Z
ZaxapKramer2017-05-07 06:01:58
css
ZaxapKramer, 2017-05-07 06:01:58

Can this be done WITHOUT Flexbox?

Hello. Here is such a "thing" should turn out as a result ( stretch / narrow the viewport for clarity ):
jsfiddle.net/0na33aea
And here is the video in which I showed how to resize:
vimeo.com/216357461 :)
You need all the same (scrolling at the columns, centering so that it doesn't break when the window is resized).
But WITHOUT Flexbox, if possible.
I tried with blocks, I tried with tables - either one does not scroll, then the other does not center ...
I'm not asking you to lay it out completely. It would be very cool, but there will be enough hints (what, for example, what exactly, etc.).
PS Of course, I understand that Flexbox is a must haveand all that, but... not now, if it's possible to do without it.
PPS Guys, either I don't understand you, or you made me ... also made a video.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Andrey Fedorov, 2017-05-07
@ZaxapKramer

You can do it on calc(), but it seems that this option will not suit you either?
https://jsfiddle.net/wfL1dq2o/3/

X
xtala zen, 2017-05-07
@xtala

If I understand correctly, we are talking about two strictly centered blocks. This can easily be done using the connected bootstrap and its classes. Because the default columns in the bootstrap are 12, then the classes must be set to a dimension of 6, i.e. .col-lg-6, .col-md-6, .col-sm-6 и .col-xs-6, for both blocks, respectively. If you need a dimension less than 6, then you can set three each, but for centering in the center, you will have to add the push and pull classes, that is, you need to add classes to the blocks

.col-lg-push-3, .col-md-push-3, .col-sm-push-3, .col-xs-push-3
to the left block with dimension 3 and
.col-lg-pull-3, .col-md-pull-3, .col-sm-pull-3, .col-xs-pull-3
to the right block with dimension three.
So many classes are needed to ensure that the block is adequately displayed on all screens, from FullHD to mobile.
UPD. The comments are about scrolls, but it's just lyrics. You just need to add a CSS property to the blocks
overflow: scroll;

M
MaximMRX, 2017-05-07
@GM_pAnda

And who canceled media requests? You make a request and assign any css properties to the element at the required resolution. And that's it

@media only screen and (max-width : 480px){
//Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 480px.
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question